/*
 * Estilos propios del Panel Administrador de cara al publico
 * ([asseo_panel_admin]). Reusa el topbar/sidebar/tokens de
 * portal-cliente/portal.css (mismo glassmorphism, mismo teal #075C5D) y
 * solo agrega lo especifico de este panel: KPIs en fila, listas de
 * filas administrables y formularios de edicion inline.
 *
 * 2026-08-13: se probo por pedido explicito un sistema plano/solido
 * (sidebar y topbar solidos, cards blancas con sombra, botones radius
 * 8px) escopado solo a este archivo. Se revirtio el mismo dia, tambien
 * a pedido explicito, tras comparar contra el Portal del Cliente real:
 * el Portal sigue usando glassmorphism en su sidebar/topbar y botones
 * pildora (999px) en todas sus paginas, asi que ese look plano solo en
 * el Panel Admin lo dejaba VISUALMENTE DISTINTO del Portal, no igual.
 * "Los dos se vean igual, tomando como referencia portal cliente" fue
 * la decision final: este archivo vuelve a heredar sin pisar nada del
 * sidebar/topbar/botones compartidos (portal.css/login.css), tal cual
 * estaba antes de esa prueba.
 */

.asseo-admin-kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin: 16px 0 24px;
}

.asseo-admin-kpi-row--3 {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Fila con una sola card (Administradores, 2026-08-14, pedido explicito)
   — "grid" con "1fr" estira la unica columna a todo el ancho disponible
   aunque la card en si sea chica; "flex" no fuerza eso. La card usa
   ".asseo-admin-kpi--auto" (mas abajo) para su propio ancho automatico. */
.asseo-admin-kpi-row--auto {
	display: flex;
}

.asseo-admin-kpi--auto {
	width: fit-content;
	min-width: 200px;
}

.asseo-admin-kpi {
	display: flex;
	align-items: center;
	gap: 14px;
	border-radius: 16px;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* Cards de metricas de Inicio unificadas (2026-08-13, pedido explicito)
   — fondo/borde parejos en vez del tinte por categoria (teal/verde/
   amarillo/morado) que sigue usando el resto del panel. "!important"
   necesario: kpi_card() (PHP) sigue mandando un "style=background:..."
   inline por card (ver ese metodo) — aunque ahora ya manda el mismo
   "#e8f5f5" en las llamadas de Inicio, el override queda igual por si
   alguna vez ese valor cambia sin querer. Coincide, sin buscarlo, con
   ".asseo-kpi-tile" del Portal Cliente (Inicio del Portal, portal.css)
   — mismos 2 colores exactos, ya confirmados contra el manual de marca. */
.asseo-admin-kpi--flat {
	background: #e8f5f5 !important;
	border: 1px solid #b1dacf;
	border-radius: 12px;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* 3 cards "destacadas" de Inicio (2026-08-13, pedido explicito: mismo
   diseño ".asseo-kpi-tile" del Portal del Cliente, ver portal.css —
   estas reglas solo agregan el color de icono/link por metrica, mismo
   patron que ya usan ahi ".asseo-kpi-tile--saldo/--reserva/--completadas"
   (accento por categoria, nunca el fondo). Los colores elegidos son los
   mismos que ya usaba kpi_card() para estas 3 metricas en la fila
   compacta, para no introducir una paleta nueva sin necesidad. */
.asseo-kpi-tile--servicios-hoy .asseo-kpi-tile__label,
.asseo-kpi-tile--servicios-hoy .asseo-kpi-tile__icon {
	color: #0d7a6c;
}

.asseo-kpi-tile--pendientes .asseo-kpi-tile__label,
.asseo-kpi-tile--pendientes .asseo-kpi-tile__icon {
	color: #8a6d1a;
}

.asseo-kpi-tile--ingresos .asseo-kpi-tile__label,
.asseo-kpi-tile--ingresos .asseo-kpi-tile__icon {
	color: #5b3fa6;
}

.asseo-kpi-tile--servicios-hoy .asseo-kpi-tile__link,
.asseo-kpi-tile--pendientes .asseo-kpi-tile__link,
.asseo-kpi-tile--ingresos .asseo-kpi-tile__link {
	color: var(--asseo-primary);
}

.asseo-admin-kpi__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asseo-admin-kpi__value {
	font-family: "Poppins", sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: var(--asseo-primary);
	line-height: 1.2;
}

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

/* Listas administrables (Agenda, Clientes, Promociones) */
.asseo-admin-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

.asseo-admin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-left: 4px solid var(--asseo-teal);
	border-radius: 14px;
	/* Vive en su PROPIO stacking context (2026-08-25, reportado con
	   captura: "no se extiende al darle clic" en el select a la medida
	   de esta fila) — cualquier elemento con "backdrop-filter" ya crea
	   uno, aunque nunca se haya notado hasta ahora. El panel desplegable
	   de ".asseo-custom-select__panel" (custom-select.js/css) tiene
	   "z-index:60", pero ese numero solo compite DENTRO del stacking
	   context de ESTA fila — nunca contra el de la fila siguiente (cada
	   ".asseo-admin-row" arma el suyo propio por el mismo motivo). Sin
	   esto, la fila de ABAJO (mas tarde en el orden del documento, sin
	   ningun z-index propio = "auto") siempre pinta por encima de
	   cualquier panel abierto en la fila de arriba, sin importar que tan
	   alto sea su z-index interno — el clic SI abre el panel, pero queda
	   tapado por la fila siguiente, exactamente como "no pasa nada" se
	   ve para quien lo usa. Con la fila abierta promovida a z-index alto
	   dentro de ".asseo-admin-list"/".asseo-admin-edit-list" (que no
	   tienen su propio stacking context), su panel ya compite de verdad
	   contra las filas vecinas y gana. */
	padding: 12px 16px;
}

/* ":has()" tiene soporte real en todos los navegadores modernos
   (Chrome/Edge/Safari desde 2023, Firefox desde 2023) — este panel es
   de uso interno del staff, no publico, mismo criterio de tolerancia
   ya aceptado para otras funciones modernas de este plugin. */
.asseo-admin-row:has(.asseo-custom-select.is-abierto) {
	position: relative;
	z-index: 10;
}

.asseo-admin-row__main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 220px;
}

.asseo-admin-row__avatar {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--asseo-bg-light-2);
	color: var(--asseo-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
}

.asseo-admin-row__avatar--warn {
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
}

/* Avatar con iniciales (2026-08-25, pedido explicito, Auxiliares de
   limpieza sin foto de perfil) — mismo circulo base que
   ".asseo-admin-row__avatar" (icono generico, todavia usado si el
   nombre viniera vacio), solo que un poco mas grande y con el texto de
   las iniciales en vez de un SVG. Colores/tamaño exactos pedidos. */
.asseo-admin-row__avatar--iniciales {
	width: 42px;
	height: 42px;
	background: #E8F5F5;
	color: #075C5D;
	font-size: 14px;
	font-weight: 500;
}

.asseo-admin-row__photo {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
}

.asseo-admin-row__title {
	font-weight: 700;
	color: var(--asseo-primary);
	font-size: 14px;
}

/* Badge de modalidad junto al nombre del servicio (2026-08-13, pedido
   explicito). El wrap en fila propia separado de ".asseo-admin-row__title"
   (que sigue siendo solo el texto) evita reescribir esa clase, ya usada
   por Clientes/Auxiliares de limpieza/Administradores sin badges. */
.asseo-admin-row__title-line {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.asseo-admin-badge-modalidad {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.asseo-admin-badge-modalidad--hogar {
	background: #e8f5f5;
	color: #075c5d;
}

.asseo-admin-badge-modalidad--oficina {
	background: #eef2ff;
	color: #3730a3;
}

.asseo-admin-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	color: var(--asseo-text-secondary);
	font-size: 12.5px;
	margin-top: 3px;
}

/*
 * Bug real corregido (2026-08-21, reportado con captura: "adaptame el
 * contenido ya que se va") — un correo de prueba largo
 * ("test_modalidad_1786381765@example.com") es un solo token sin
 * espacios: el navegador no tiene ningun punto natural donde partirlo
 * en 2 lineas, asi que se desbordaba de la tarjeta en vez de ajustarse
 * (".asseo-admin-row__meta" ya tenia "flex-wrap:wrap", pero eso solo
 * mueve SPANS completos a la siguiente linea, no parte el texto de
 * adentro de uno). "overflow-wrap:anywhere" deja partir la palabra
 * cuando no entra completa — mismo criterio que cualquier correo real
 * largo necesitaria igual, no es un caso especial de datos de prueba.
 */
.asseo-admin-row__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.asseo-admin-row__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * Aire extra antes de "Eliminar" (2026-08-25, /ui-ux-pro-max) — con el
 * mismo "gap:8px" que separa a los propios iconos-utilidad entre si
 * (Documentos/Habilidades/Contraseña), el grupo entero se leia como 4-5
 * botones del mismo peso, sin nada que marque "las primeras son
 * acciones normales, esta ultima es destructiva y aparte" (mismo
 * criterio que ya usa el color rojo, reforzado con espacio real en vez
 * de depender solo del color).
 */
.asseo-admin-row__actions .asseo-btn--outline-eliminar {
	margin-left: 6px;
}

/*
 * Reportado 2 veces con captura: icono descentrado + un borde negro
 * inesperado. Causa real (no la que se penso la primera vez): este
 * boton nunca tuvo "!important" en fondo/borde/tamaño — el reset de
 * Hello Elementor para "button"/"[type=button]" (mismo conflicto ya
 * documentado muchas veces en este archivo: su selector empata o le
 * gana en especificidad a una regla de 1 sola clase sin "!important")
 * le estaba pisando el borde mint por el borde oscuro por defecto del
 * navegador/tema y el padding, corriendo tanto la forma del boton como
 * el icono de adentro. Se refuerzan con "!important" TODAS las
 * propiedades que definen la forma/apariencia del boton, no solo el
 * borde — mismo criterio ya usado en ".asseo-btn--outline-eliminar"/
 * ".asseo-admin-guardar-derecha" de este mismo archivo.
 */
.asseo-admin-icon-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 10px !important;
	border: 1px solid var(--asseo-mint) !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
	cursor: pointer;
	text-decoration: none;
	padding: 0 !important;
	margin: 0;
	line-height: 0;
	box-shadow: none !important;
	outline: none;
}

.asseo-admin-icon-btn:hover,
.asseo-admin-icon-btn:focus,
.asseo-admin-icon-btn:focus-visible,
.asseo-admin-icon-btn:active {
	border: 1px solid var(--asseo-mint) !important;
	box-shadow: none !important;
	outline: none;
}

/* El icono (lapiz, etc.) se veia corrido dentro del circulo — un <svg>
   es "inline" por defecto, y varios navegadores le reservan espacio de
   "descendente" como si fuera una letra de texto ANTES de que el
   flexbox del boton lo centre, corriendolo unos pixeles. */
.asseo-admin-icon-btn svg {
	display: block;
	flex-shrink: 0;
}

.asseo-admin-icon-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* "!important" agregado aca tambien (2026-08-14) — la base de arriba
   ahora usa "!important" en color/border por el conflicto con el reset
   del tema, y un "!important" en la base le gana a un valor SIN
   "!important" en el modificador sin importar el orden/especificidad. */
.asseo-admin-icon-btn--danger {
	color: var(--asseo-danger) !important;
	border-color: rgba(192, 57, 43, 0.3) !important;
}

.asseo-admin-icon-btn--wa {
	color: var(--asseo-whatsapp) !important;
	border-color: rgba(37, 211, 102, 0.35) !important;
}

/* "Eliminar" (2026-08-25, pedido explicito, reemplaza el boton de texto
   rojo de siempre) — gris/neutro en reposo (mismo look que los demas
   botones-icono de la fila, NO se distingue como "peligroso" hasta que
   el mouse pasa por encima), rojo claro solo al hover. Diferente de
   ".asseo-admin-icon-btn--danger" (arriba, rojo SIEMPRE) a proposito:
   ese modificador se usa donde el peligro debe ser visible de entrada;
   aca el pedido fue especificamente que el rojo aparezca recien en
   hover. */
.asseo-admin-icon-btn--eliminar:hover,
.asseo-admin-icon-btn--eliminar:focus-visible {
	background: #FEE2E2 !important;
	border-color: #FEE2E2 !important;
	color: #DC2626 !important;
}

/* Formularios de edicion inline (Servicios, Auxiliares de limpieza) */
.asseo-admin-edit-list {
	display: flex;
	flex-direction: column;
	/* 14px, no 10px (2026-08-25, /ui-ux-pro-max) — la fila de Auxiliares
	   de limpieza crecio a 3 lineas apiladas (nombre / especialidad+zona+
	   calificacion / toggles+acciones); con solo 10px de aire entre
	   tarjetas, el limite entre UNA auxiliar y la siguiente se leia casi
	   igual de "apretado" que el espacio ENTRE los propios bloques
	   internos de una misma tarjeta (ver row-gap de ".asseo-admin-row--
	   auxiliar" mas abajo) — nada marcaba con claridad donde terminaba
	   una persona y empezaba otra. Sube tambien para Servicios (misma
	   clase compartida, filas de una sola linea) — mas aire entre filas
	   nunca esta de mas ahi tampoco.
	*/
	gap: 14px;
	margin-top: 10px;
}

/*
 * Ya NO es "nowrap" (2026-08-25, 2do reporte visual sobre esta misma
 * fila: "no esta ordenado y aparece por encima") — esta fila crecio de
 * 1 select+1 toggle+1 boton-icono (2026-08-13/14) a 2 selects
 * (Especialidad+Ciudad, 2026-08-22) + 2 toggles (Activo+Media Jornada,
 * mismo dia) + 4 botones-icono (Documentos/Habilidades/Contraseña,
 * 2026-08-22/23), sin que nadie volviera a probar el "nowrap" original
 * contra ese contenido nuevo. Causa real del bug (no la que parecia a
 * simple vista): con "nowrap", ".asseo-admin-row__main"/
 * "__auxiliar-meta"/"__auxiliar-footer" se reparten el ancho de la fila
 * ENTRE LOS 3 en una sola linea — "__auxiliar-meta" (los 2 selects de
 * 240px fijos + la pastilla de calificacion, ~620px de contenido real)
 * terminaba con lo que le sobrara despues de "__main" y "__auxiliar-
 * footer", casi nunca esos 620px completos ni en pantallas anchas — así
 * que su propio "flex-wrap:wrap" interno (ver mas abajo) se activaba
 * SIEMPRE, amontonando la pastilla debajo de un select cualquiera en
 * vez de quedar prolijamente debajo de los 2. Ahora cada bloque
 * ("__main"/"__auxiliar-meta"/"__auxiliar-footer") ocupa su PROPIA
 * linea completa siempre — "__auxiliar-meta" ya tiene el ancho REAL de
 * la tarjeta completa para acomodar sus 2 selects + pastilla, que a
 * esa altura sí entran comodos en cualquier pantalla real de escritorio
 * (el respaldo especifico para telefonos angostos, donde ni el ancho
 * completo alcanza, sigue en el media query de mas abajo).
 */
.asseo-admin-row--auxiliar {
	flex-wrap: wrap;
	row-gap: 10px;
	/* Borde-acento fijo en TODAS las tarjetas, con y sin zona (2026-08-25,
	   pedido explicito: "Todas las tarjetas... deben tener border-left:
	   3px solid #17AEA2") — hasta ahora esta variante lo quitaba del todo
	   (2026-08-13: "no comunicaba nada real") y solo ".is-sin-zona" (mas
	   abajo) lo agregaba de vuelta en amarillo como alerta. Con este
	   cambio la alerta de "sin zona" ya NO vive en el borde (que ahora es
	   el mismo teal para todas) sino solo en el tag "⚠ Sin zona" y el
	   texto de ayuda debajo — sigue sin depender solo de un color, solo
	   que ese color ya no es distinto del resto de la tarjeta. */
	border-left: 3px solid #17AEA2;
}

.asseo-admin-row--auxiliar .asseo-admin-row__main,
.asseo-admin-row--auxiliar .asseo-admin-row__auxiliar-meta,
.asseo-admin-row--auxiliar .asseo-admin-row__auxiliar-footer {
	flex: 1 1 100%;
}

/* Separador entre tarjetas de auxiliares (2026-08-25, pedido explicito:
   "el primero no tiene el color... haz la division con un color verde
   oscuro y que sea mas notable") — antes el unico limite entre una
   tarjeta y la siguiente era el aire en blanco del "gap" de
   ".asseo-admin-list", igual que en el resto del panel; con la lista ya
   bastante mas cargada (avatar, 2 tags, aviso de zona, toggles, 4
   iconos) ese aire ya no bastaba para leer donde termina un auxiliar y
   empieza el otro. El selector de hermano adyacente ("+") hace que la
   PRIMERA tarjeta de la lista nunca lleve este borde (no hay ninguna
   arriba de ella que separar) sin necesidad de marcarla aparte — asi se
   ve la primera fila del ejemplo real que trajo el usuario. Color:
   "--asseo-primary" (#075c5d), el verde oscuro de marca ya usado en
   titulos/iconos de toda esta vista. */
.asseo-admin-row--auxiliar + .asseo-admin-row--auxiliar {
	border-top: 4px solid var(--asseo-primary);
}

/*
 * Linea divisoria fina (2026-08-25, /ui-ux-pro-max) entre los 3 bloques
 * apilados de esta tarjeta (nombre / especialidad+zona+calificacion /
 * toggles+acciones) — antes el unico limite entre bloques era el
 * "row-gap" de la tarjeta, el mismo aire "en blanco" que separa una
 * tarjeta de la siguiente (ver ".asseo-admin-edit-list" arriba): sin
 * ninguna marca visual propia, los 3 bloques se leian como una lista
 * suelta de controles, no como SECCIONES de una misma persona. Un
 * hairline sutil (no un borde solido pesado) mantiene el look "glass"
 * de siempre, solo agrega ritmo interno.
 */
.asseo-admin-row--auxiliar .asseo-admin-row__auxiliar-meta,
.asseo-admin-row--auxiliar .asseo-admin-row__auxiliar-footer {
	padding-top: 12px;
	border-top: 1px solid rgba(7, 92, 93, 0.1);
}

.asseo-admin-row__auxiliar-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/*
 * Especialidad/Zona como "tags" compactos, no como campos de ancho fijo
 * (2026-08-25, pedido explicito) — siguen siendo el MISMO <select> real
 * y editable de siempre (ver Asseo_App_CPT_Auxiliares::
 * render_select_especialidad()/render_select_zona(), sin cambios de
 * logica ni de guardado): esto solo re-viste el disparador visual del
 * select a la medida (custom-select.js), que es lo unico que se ve —
 * el <select> real sigue oculto+funcional dentro. ":has()" apunta el
 * wrapper (".asseo-custom-select") a partir de una clase en el <select>
 * hijo real (".asseo-admin-tag-select", agregada solo en estos 2
 * llamados puntuales) — mismo soporte de navegador ya aceptado arriba
 * en este archivo (uso interno de staff).
 */
.asseo-admin-row__auxiliar-meta .asseo-custom-select:has(> select.asseo-admin-tag-select) {
	flex: 0 0 auto;
	width: auto;
}

.asseo-admin-row__auxiliar-meta .asseo-custom-select:has(> select.asseo-admin-tag-select) .asseo-custom-select__trigger {
	width: auto;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
}

.asseo-admin-row__auxiliar-meta .asseo-custom-select:has(> select.asseo-admin-tag-select) .asseo-custom-select__chevron svg {
	width: 12px;
	height: 12px;
}

/* Especialidad, y Zona cuando SI tiene una asignada: mismo par de
   colores mint (mismo criterio "reusar la paleta ya establecida" del
   resto del plugin — el mint de aca es el mismo que ya usa, por
   ejemplo, ".asseo-admin-badge-modalidad--hogar"). */
.asseo-admin-row__auxiliar-meta .asseo-custom-select:has(> select.asseo-admin-tag-select--especialidad) .asseo-custom-select__trigger,
.asseo-admin-row__auxiliar-meta .asseo-custom-select:has(> select.asseo-admin-tag-select--zona) .asseo-custom-select__trigger {
	background: #E8F5F5;
	color: #075C5D;
	border: 0.5px solid #B1DACF;
}

/* Zona vacia: el disparador mismo hace de "tag de alerta" (texto real
   "⚠ Sin zona", ver el parametro $placeholder nuevo de
   render_select_zona()). Colores actualizados de amarillo a verde
   (2026-08-25, pedido explicito: "cambio de color amarillo a verde") —
   ya no son colores de advertencia distintos del resto de la tarjeta
   (ver tambien el borde-izquierdo, ahora uniforme arriba); la alerta
   sigue viva solo por el texto "⚠ Sin zona" + el aviso de abajo. Sigue
   siendo clickeable: un clic ahi mismo abre el selector real de zonas,
   no hace falta ir a otro lado a corregirlo. */
.asseo-admin-row--auxiliar.is-sin-zona .asseo-admin-row__auxiliar-meta .asseo-custom-select:has(> select.asseo-admin-tag-select--zona) .asseo-custom-select__trigger {
	background: #D4EFEA;
	color: #075C5D;
	border: 0.5px solid #2BB5AF;
}

.asseo-admin-row--auxiliar.is-sin-zona .asseo-admin-row__auxiliar-meta .asseo-custom-select:has(> select.asseo-admin-tag-select--zona) .asseo-custom-select__label {
	color: #075C5D;
}

/* Texto de ayuda bajo los tags, solo en la fila sin zona (2026-08-25,
   pedido explicito) — "flex-basis:100%" para que caiga en su propia
   linea completa debajo de los tags/pastilla, no pegado a un costado.
   Color actualizado de amarillo (#7A5A00) a verde (#2BB5AF, 2026-08-25,
   pedido explicito). */
.asseo-admin-row__auxiliar-zona-aviso {
	flex: 1 1 100%;
	margin: 0;
	font-size: 11px;
	color: #2BB5AF;
}

.asseo-admin-row__auxiliar-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 10px;
	gap: 10px;
}

/* Los 2 toggles ("Activo"/"Media Jornada", 2026-08-22) van agrupados en
   su propio bloque — ".asseo-admin-row__auxiliar-footer" (arriba) reparte
   sus hijos directos con "justify-content:space-between", y este wrapper
   evita que ese reparto trate a cada toggle como un bloque propio
   (quedarian separados entre si en vez de juntos a la izquierda, con las
   acciones solas a la derecha). */
.asseo-admin-row__auxiliar-toggles {
	display: flex;
	align-items: center;
	/* 12px, no 14px (2026-08-25, pedido explicito: "Activo y Media
	   Jornada... con gap 12px entre ellos, font-size 12px") — el
	   tamaño de texto se ajusta en ".asseo-admin-row__auxiliar-toggles
	   .asseo-admin-toggle-switch__texto" mas abajo, scopeado a esta
	   fila especifica: ".asseo-admin-toggle-switch__texto" es una clase
	   compartida por otros toggles del panel (Servicios, Kits) que no
	   pidieron este cambio. */
	gap: 12px;
	flex-wrap: wrap;
}

.asseo-admin-row__auxiliar-toggles .asseo-admin-toggle-switch__texto {
	font-size: 12px;
}

.asseo-admin-input {
	border: 1.5px solid var(--asseo-mint);
	border-radius: 10px;
	padding: 8px 12px;
	font-family: "Poppins", sans-serif;
	font-size: 13.5px;
	color: var(--asseo-primary);
	background: #fff;
	/* Sin esto (2026-08-19, bug encontrado en auditoria) el navegador usa
	   "content-box": el ancho fijo de ".asseo-admin-input--select" (ver
	   abajo) queda encima del padding+borde en vez de incluirlos, dejando
	   bastante menos espacio real para el texto del que el numero sugiere. */
	box-sizing: border-box;
}

.asseo-admin-input:focus {
	outline: none;
	border-color: var(--asseo-accent);
	/* Anillo de foco visible (2026-08-14, /ui-ux-pro-max — accesibilidad:
	   "focus-states", minimo 2px) — antes el unico cambio al enfocar era
	   el color del borde, insuficiente para quien navega con teclado.
	   Mejora general del campo compartido, no escopada a una pestaña. */
	box-shadow: 0 0 0 3px rgba(23, 174, 162, 0.18);
}

.asseo-admin-row .asseo-admin-input {
	width: 130px;
	text-align: right;
	font-weight: 700;
}

.asseo-admin-row--auxiliar .asseo-admin-input {
	width: auto;
	flex: 1 1 160px;
	text-align: left;
	font-weight: 500;
}

/* Nombre como texto plano en la lista, ya no <input> (2026-08-25, pedido
   explicito) — mismo espacio que ocupaba el input de antes
   ("flex:1 1 160px" arriba), pero ya no es un campo editable ahi mismo:
   la edicion real vive en el modal "Editar auxiliar" (ver
   ".asseo-admin-habilidades-nombre-campo" mas abajo). Tamaño/peso/color
   exactos pedidos: 15px, 500, color principal de esta vista
   ("--asseo-primary", el mismo que ya usa ".asseo-admin-row__title" en
   el resto del panel). */
.asseo-admin-row__nombre-texto {
	flex: 1 1 160px;
	font-size: 15px;
	font-weight: 500;
	color: var(--asseo-primary);
}

/*
 * "/ui-ux-pro-max, mejorame esta visual" (2026-08-25, reportado con
 * captura: Especialidad/Zona con un ancho distinto en cada fila, sin
 * alinear en columna) — bug real encontrado, no solo cosmetico: estas
 * reglas (240px fijos) SIEMPRE apuntaron a ".asseo-admin-input--select",
 * la clase del <select> NATIVO — pero ese <select> tiene
 * "data-custom-select" (ver PHP), asi que custom-select.js lo deja
 * "position:absolute" e INVISIBLE, y arma un <div class="asseo-custom-
 * select"> nuevo al lado, que es lo que el usuario ve y donde el
 * flexbox de verdad reparte espacio — un "flex"/"width" en un elemento
 * "position:absolute" no hace nada (queda fuera del flujo del layout).
 * Resultado: el ancho fijo nunca llego a aplicarse de verdad, cada
 * trigger visible se encogia/estiraba solo al ancho de su propio texto
 * ("Hogar y Oficina" mas ancho que "Hogar", "— Seleccione zona —" mas
 * ancho que "Medellín"), rompiendo la alineacion en columna de toda la
 * lista. Se agrega ".asseo-custom-select" al selector (el elemento
 * REAL que hay que medir) — se mantiene ".asseo-admin-input--select"
 * tambien, por si algun dia custom-select.js no llegara a correr (el
 * <select> nativo queda 100% funcional como respaldo, mismo criterio
 * de "mejora progresiva" que el resto de este componente).
 */
.asseo-admin-input--select,
.asseo-admin-row__auxiliar-meta .asseo-custom-select {
	/* 240px, no 200px (2026-08-19, bug encontrado en auditoria): 200px ya
	   se habia corregido una vez por el mismo motivo (ver historial abajo)
	   pero seguia sin alcanzar — con box-sizing:border-box agregado arriba,
	   el padding (12px×2) + borde (1.5px×2) + la flecha nativa del <select>
	   le restan a los 200px bastante mas espacio real del que el numero
	   sugiere, y el placeholder mas largo ("— Seleccione especialidad —",
	   28 caracteres) seguia sin caber completo. */
	flex: 0 0 240px !important;
	min-width: 240px;
	/* Respaldo para especialidades futuras mas largas que no quepan ni a
	   240px: recorta con "…" en vez de cortar el texto en seco (Firefox no
	   soporta ellipsis en <select>, se degrada a corte simple ahi, pero no
	   empeora nada). El trigger visible ya trae su propio ellipsis (ver
	   ".asseo-custom-select__label" en custom-select.css) — esto solo
	   sigue protegiendo al <select> nativo de respaldo.
	*/
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/*
 * Badge de solo lectura con el promedio real de valoraciones (item 4,
 * 2026-08-13) — reemplaza el <select> de estrellas editable.
 * "padding"/"font-size"/"border" ajustados (2026-08-25, /ui-ux-pro-max)
 * para que su ALTO calce con el de los selects de al lado (".asseo-
 * custom-select__trigger": padding 11px + borde 1.5px, ~43px de alto) —
 * antes esta pastilla quedaba notoriamente mas baja/delgada que sus 2
 * vecinos en la misma fila, rompiendo la alineacion vertical del grupo
 * aunque el ancho ya calzara.
 */
.asseo-admin-badge-calificacion {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	white-space: nowrap;
	border-radius: 999px;
	padding: 10px 16px;
	border: 1.5px solid transparent;
	box-sizing: border-box;
	font-size: 13px;
	font-weight: 600;
	background: #fff7dc;
	color: #8a6d1a;
}

.asseo-admin-badge-calificacion__total {
	font-weight: 500;
	opacity: 0.75;
}

.asseo-admin-badge-calificacion--vacia {
	background: var(--asseo-bg-light-2);
	color: var(--asseo-text-secondary);
	font-weight: 500;
}

/* Toggle Activo/Inactivo por fila (item 6, 2026-08-13) — checkbox real
   (se sigue enviando en el <form> de guardado por lote) escondido y
   estilizado como pastilla, mismo criterio visual que el resto del
   panel (radius 999px, paleta teal/gris). */
.asseo-admin-toggle-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--asseo-text-secondary);
	white-space: nowrap;
}

.asseo-admin-toggle-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.asseo-admin-toggle-switch__pista {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: #d8dde0;
	transition: background 0.15s ease;
}

.asseo-admin-toggle-switch__pista::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.asseo-admin-toggle-switch input:checked + .asseo-admin-toggle-switch__pista {
	background: var(--asseo-teal);
}

.asseo-admin-toggle-switch input:checked + .asseo-admin-toggle-switch__pista::before {
	transform: translateX(16px);
}

.asseo-admin-toggle-switch input:focus-visible + .asseo-admin-toggle-switch__pista {
	outline: 2px solid var(--asseo-accent);
	outline-offset: 2px;
}

.asseo-admin-row--auxiliar.is-inactiva {
	opacity: 0.7;
}

/* Grupo "$ [input] COP" (2026-08-13, pedido explicito) — "$"/"COP" son
   texto estatico afuera del campo editable, nunca se envian con el
   form. El input adentro sigue siendo ".asseo-admin-input" (hereda el
   ancho/alineacion de ".asseo-admin-row .asseo-admin-input" de arriba
   sin necesitar una regla nueva para eso). */
.asseo-admin-price-field {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/*
 * "Tarifa" en el modal "Editar servicio"/"Editar adicional" (2026-08-17,
 * /ui-ux-pro-max, con captura: el campo aparecia PEGADO al lado del
 * texto "Tarifa", en la misma linea, mientras todos los demas campos
 * del modal caen en su propia linea debajo del label). Causa real:
 * ".asseo-admin-agenda__modal label select, ...label input" (mas abajo
 * en este archivo) fuerza "display:block" — pero esa regla apunta a
 * <select>/<input> DIRECTOS, y ".asseo-admin-price-field" es un <div>
 * envolviendo "$ [input] COP", no un input suelto — nunca calzaba con
 * ese selector, asi que se quedaba con su "display:inline-flex" de
 * arriba, en la misma linea que el texto del <label>. Selector
 * especifico (no toca el ".asseo-admin-price-field" de las filas de la
 * lista principal, que SI necesita seguir siendo inline dentro de su
 * propia celda de grid).
 */
.asseo-admin-agenda__modal label .asseo-admin-price-field {
	display: flex;
	margin-top: 6px;
}

.asseo-admin-price-field__affix {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--asseo-primary);
}

/* Encabezado de seccion con boton a la derecha del titulo (2026-08-13,
   pedido explicito — 2do ajuste de posicion del boton "Guardar cambios"
   de Servicios, ver PHP: ahora vive junto al <h2>, afuera del <form>,
   conectado por el atributo "form"). Reset del margin del <h2> SOLO
   dentro de este wrapper (para no desalinear verticalmente el boton) —
   no toca el <h2> generico que usan las demas pestañas. */
.asseo-admin-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.asseo-admin-section-header h2 {
	margin: 0;
}

/* "Agregar auxiliar" junto a "Guardar cambios" (2026-08-13) — mismo
   wrapper generico para cualquier encabezado con 2+ botones a la
   derecha, sin necesitar una clase nueva por pestaña. */
.asseo-admin-section-header__acciones {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Botones del encabezado de pestaña mas chicos que el ".asseo-btn" base
   (2026-08-13, corregido el mismo dia: heredaban el padding "0.8em 1.8em"
   pensado para CTAs de pagina completa como Login — ahi se veian
   correctos, pero 2 de esos botones juntos en la barra de un <h2>
   quedaban mas altos que el titulo mismo y aplastaban el subtitulo de
   abajo, que resta 8px de margen-top pensado para un <h2> sin botones al
   lado — ver ".asseo-admin-section-header + .asseo-portal__subtitle"
   mas abajo). Aplica a CUALQUIER boton dentro de este wrapper (Guardar
   cambios, Agregar auxiliar), no solo a ".asseo-admin-guardar-derecha".*/
/* Icono desalineado del texto (2026-08-26, reportado con captura: "Agregar
   cliente"/"Descargar Excel") — ".asseo-btn" base (login.css) es
   "display:inline-block" a secas, pensado para un boton de solo texto; el
   SVG del icono, como cualquier elemento reemplazado inline, se alinea
   por defecto a la LINEA BASE del texto (su borde inferior), no al centro
   vertical — con iconos de 15-16px eso se nota como el icono "flotando"
   un par de px mas arriba o abajo que la letra. Se corrige aca (no en la
   base ".asseo-btn", que usan botones de solo-texto en todo el plugin —
   cambiar su "display" ahi tendria alcance mucho mayor al pedido) porque
   TODOS los botones con icono+texto de este panel viven dentro de
   ".asseo-admin-section-header__acciones" (Agregar auxiliar/administrador/
   cliente, Descargar Excel). Sin "gap": el PHP ya deja un espacio en
   blanco real entre el icono y el texto (salto de linea/tabs entre los 2
   "echo" del markup) — agregar "gap" aca duplicaria ese espacio en vez
   de solo arreglar la alineacion vertical. */
.asseo-admin-section-header__acciones .asseo-btn {
	font-size: 13px;
	padding: 9px 18px !important;
	display: inline-flex;
	align-items: center;
}

.asseo-admin-section-header__acciones .asseo-admin-guardar-derecha {
	align-self: auto;
	margin-right: 0;
}

/* Separacion real entre el encabezado con botones y el subtitulo de la
   pestaña (2026-08-13) — ".asseo-portal__subtitle" trae "margin-top:-8px"
   pensado para pegarse a un <h2> sin nada al lado (portal.css); con
   botones en la misma fila esa resta queda de mas y el subtitulo
   terminaba pegado/tapado contra ellos. Selector de hermano directo:
   solo afecta a las pestañas que SI tienen botones en el encabezado
   (Servicios, Auxiliares de limpieza), no a las demas. */
.asseo-admin-section-header + .asseo-portal__subtitle {
	margin-top: 10px;
}

/* "Guardar cambios" de Servicios y, desde el mismo dia, tambien de
   Auxiliares de limpieza (2026-08-13, 2do pedido explicito el mismo dia):
   de ancho completo (heredaba "align-items: stretch" del flex column de
   ".asseo-admin-edit-list") a ancho automatico alineado a la derecha, ya
   sea junto al <h2> (Servicios/Auxiliares, via el atributo "form") o
   dentro del propio <form> (si hiciera falta en otra pestaña). Clase
   propia — NO se toca ".asseo-btn" en general, que tambien usa
   Configuracion (ese formulario no se mencionaron en el pedido, sigue de
   ancho completo). */
.asseo-admin-guardar-derecha {
	align-self: flex-end;
	margin-right: 24px;
	padding: 12px 32px !important;
	border-radius: 8px !important;
	/* Sin borde propio (2026-08-13, corregido el mismo dia): ".asseo-btn"
	   base ya trae "border: none" pero SIN "!important" — pierde contra
	   cualquier borde/outline que el tema o el navegador aplique con mas
	   fuerza (mismo mecanismo ya documentado en este archivo para
	   color/background de <button> contra el Kit de Elementor, aca
	   aplicado a border/outline/box-shadow). Fondo/texto ya son correctos
	   via ".asseo-btn" (var(--asseo-primary) = #075c5d, color:#fff). */
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.asseo-admin-guardar-derecha:hover,
.asseo-admin-guardar-derecha:focus,
.asseo-admin-guardar-derecha:focus-visible,
.asseo-admin-guardar-derecha:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* "Guardar cambios" deshabilitado mientras no haya cambios sin guardar
   (2026-08-17, pedido explicito, Auxiliares de limpieza) — mismo gris
   que ".asseo-login__submit:disabled" (login.css), mismo motivo:
   ".asseo-btn" fija fondo/texto teal con "!important", asi que el
   estado disabled necesita "!important" para poder pisarlo. Clase
   compartida con "Servicios y tarifas": ese formulario no tiene el
   JS que activa/desactiva el atributo "disabled" (no fue parte de
   este pedido), asi que ahi el boton sigue siempre habilitado como
   antes — esta regla solo se activa donde el atributo "disabled" este
   realmente presente. */
.asseo-admin-guardar-derecha:disabled {
	background: #d9dde1 !important;
	color: #8a8f98 !important;
	cursor: not-allowed;
	transform: none !important;
	filter: none !important;
}

/* 3 correcciones en "Configuración" (2026-08-13, pedido explicito). */

/* 1. Inputs de valor (Telefono/WhatsApp/Correo/Horario): ancho completo
   en vez de los 130px right-align de ".asseo-admin-row .asseo-admin-input"
   (pensados para el precio de Servicios, que comparte la misma clase
   base) — truncaban el valor. "overflow/text-overflow/white-space"
   solo entran en juego si el valor no entra ni en el ancho completo del
   formulario (min-width 280px de piso); el atributo "title" (ver PHP)
   da el tooltip nativo con el valor completo al hover, sin JS. Misma
   especificidad que la regla que pisa (2 clases), se resuelve por
   orden en la hoja — declarada despues, gana. */
.asseo-admin-row--configuracion .asseo-admin-input {
	width: 100%;
	min-width: min(280px, 100%);
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Pulido visual (2026-08-14, /ui-ux-pro-max, "mas profesional,
	   respetando colores") — un poco mas de aire que el default
	   ".asseo-admin-input" (pensado para filas mas compactas), a tono
	   con el resto de la card, mas espaciosa. */
	padding: 11px 14px;
}

/* 2. "Guardar cambios" de Configuracion: mismo criterio que
   ".asseo-admin-guardar-derecha" (ancho automatico, radius 8px, sin
   borde/outline propio que gane por especificidad) pero con su propio
   margen — este boton vive DENTRO del <form>, debajo de la ultima
   fila (no junto a un <h2>, como el de Servicios/Auxiliares), asi que
   necesita separacion arriba ("margin-top"), no a la derecha del
   header ("margin-right"). Fondo/texto ya son los correctos via
   ".asseo-btn" (var(--asseo-primary) = #075c5d, color:#fff). */
.asseo-admin-guardar-configuracion {
	align-self: flex-end;
	width: auto;
	min-width: 180px;
	margin-top: 24px;
	border-radius: 8px !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.asseo-admin-guardar-configuracion:hover,
.asseo-admin-guardar-configuracion:focus,
.asseo-admin-guardar-configuracion:focus-visible,
.asseo-admin-guardar-configuracion:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/*
 * Pulido visual completo de "Configuración" (2026-08-14, /ui-ux-pro-max,
 * "mas profesional, respetando colores"). Diagnostico antes de tocar
 * nada: cada campo ya vivia dentro de ".asseo-admin-row" (la misma
 * "card" con glassmorphism que usa el resto del panel — Agenda/
 * Clientes/Servicios), pero esa card es un blanco translucido (55%) +
 * blur PENSADO para flotar sobre el fondo degradado de
 * ".asseo-portal-wrap" — en esta pestaña en particular el fondo detras
 * es blanco liso, asi que un blanco al 55% sobre blanco es
 * practicamente invisible: el icono y el input quedaban sueltos, sin
 * ninguna card visible que los agrupara (bug de contraste, no de
 * layout — el agrupamiento en el DOM ya era correcto).
 *
 * Reemplazado por el mismo par de colores YA establecido en el resto
 * del panel para "card plana" (KPIs de Inicio/Servicios/Auxiliares/
 * Administradores, ver ".asseo-admin-kpi--flat" mas arriba: fondo
 * #e8f5f5 + borde #b1dacf) en vez de inventar una paleta nueva — es
 * literalmente "respetar los colores" ya elegidos para esta app. El
 * layout pasa de "fila horizontal + input flotando debajo" (dependia
 * de que el input fuera 100% ancho para forzar el salto de linea) a
 * columna explicita, mismo resultado visual pero ya no es un efecto
 * colateral del ancho del input.
 */
.asseo-admin-row--configuracion {
	border-left: none;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	background: #e8f5f5;
	border: 1px solid #b1dacf;
	border-radius: 14px;
	padding: 18px 20px;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.asseo-admin-row--configuracion:hover {
	border-color: var(--asseo-accent);
	box-shadow: 0 4px 14px rgba(7, 92, 93, 0.08);
}

/* El icono queda en un circulo blanco (en vez de heredar el mismo
   verde-mint claro de ".asseo-admin-row__avatar" de siempre) para que
   no se funda con el fondo de la card, ahora del mismo tono. */
.asseo-admin-row--configuracion .asseo-admin-row__avatar {
	background: #fff;
}

/* Mas separacion entre las 4 cards (2026-08-14) — con el fondo tintado
   nuevo, 10px (el gap generico de ".asseo-admin-edit-list", compartido
   con Servicios/Auxiliares) se sentia apretado entre cards mas altas;
   se sobreescribe solo para esta lista via ":has()" en vez de tocar el
   gap generico (ya usado en otro lado de este archivo, ver
   ".asseo-wizard__adicional-item:has()" en wizard.css — mismo
   navegador soportado). */
.asseo-admin-edit-list:has(.asseo-admin-row--configuracion) {
	gap: 18px;
}

/* Fila de Administradores (2026-08-14, pedido explicito): el boton
   "Eliminar" quedaba pegado al extremo derecho de la pantalla porque
   ".asseo-admin-row" base usa "justify-content: space-between" (los 2
   hijos — "__main" y "__actions" — se reparten en los extremos), algo
   que SI tiene sentido en Servicios (el precio alineado a la derecha)
   pero no aca (el pedido es que el boton quede pegado al contenido, no
   al borde). Se sobreescribe solo esta variante, no la clase base —
   mismo patron que ".asseo-admin-row--auxiliar"/"--configuracion". */
.asseo-admin-row--administrador {
	justify-content: flex-start;
	gap: 16px;
	/* Sin borde-acento teal (2026-08-14, pedido explicito) — el selector
	   que lo genera es ".asseo-admin-row" de base (mismo archivo, cerca
	   del principio: "border-left:4px solid var(--asseo-teal)"), pensado
	   para Agenda/Clientes/Promociones. No se toca esa regla base (la
	   siguen usando esas 3 pestañas) — se sobreescribe solo esta
	   variante, mismo patron ya usado en ".asseo-admin-row--auxiliar". */
	border-left: none;

	/*
	 * Pulido visual (2026-08-14, /ui-ux-pro-max, "mas profesional,
	 * respetando colores"). Mismo diagnostico ya hecho arriba para
	 * ".asseo-admin-row--configuracion": ".asseo-admin-row" base es un
	 * blanco translucido (55%) + blur pensado para flotar sobre el fondo
	 * degradado de ".asseo-portal-wrap" — sobre el fondo blanco liso de
	 * esta pestaña, esa card es practicamente invisible (reportado con
	 * captura: la fila se veia "flotando" sin ningun borde real). Se
	 * reemplaza por blanco solido + borde mint (mismos tokens ya
	 * establecidos en ".asseo-admin-report-card", no una paleta nueva —
	 * esta lista es una serie de filas repetidas, no una sola card de
	 * ajustes, asi que un fondo BLANCO con borde (no el tinte #e8f5f5
	 * completo de Configuracion) se ve mas limpio al repetirse varias
	 * veces sin cansar la vista).
	 *
	 * "align-self:flex-start" + "max-width" (mismo pedido, 2do problema
	 * real en la misma captura): ".asseo-admin-list" es
	 * "flex-direction:column" SIN "align-items" propio (hereda el
	 * "stretch" por defecto de flexbox), y ".asseo-portal__content" (la
	 * columna principal del panel) no tiene max-width — la fila se
	 * estiraba a TODO el ancho de la pantalla, dejando el nombre/correo/
	 * boton agrupados a la izquierda y un vacio enorme a la derecha sin
	 * ningun proposito. Se corrige SOLO en esta variante (no en
	 * ".asseo-admin-list" generica, que tambien usan Agenda/Clientes/
	 * Promociones con su propio layout).
	 */
	background: #fff;
	border: 1px solid #e0f5f5;
	border-radius: 14px;
	padding: 16px 20px;
	box-shadow: 0 1px 3px rgba(7, 92, 93, 0.06);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	align-self: flex-start;
	width: 100%;
	max-width: 620px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.asseo-admin-row--administrador:hover {
	border-color: var(--asseo-mint);
	box-shadow: 0 4px 14px rgba(7, 92, 93, 0.1);
}

/*
 * Filas de "Servicios y tarifas" (2026-08-17, /ui-ux-pro-max, "mas
 * profesional y sin bug"). Mismo diagnostico exacto ya hecho arriba para
 * ".asseo-admin-row--administrador"/"--configuracion": ".asseo-admin-row"
 * base es blanco translucido (55%) + blur pensado para el fondo
 * degradado de ".asseo-portal-wrap", invisible sobre el blanco liso de
 * esta pestaña. El "bug" real reportado con captura (una especie de
 * gancho/curva teal suelta en la esquina superior izquierda de cada
 * fila, en vez de una barra completa) es "border-left:4px solid
 * var(--asseo-teal)" de la clase base encontrandose con
 * "border-radius:14px" en las 4 esquinas SOBRE un fondo que no lo
 * sostiene visualmente — el borde-acento nunca comunicaba nada real aca
 * tampoco (no hay ningun estado que distinga una fila de otra), asi que
 * se quita entero, no se intenta "enderezar la curva".
 *
 * A diferencia de Administradores, ACA no se le pone "max-width": el
 * precio necesita seguir alineado a la derecha usando todo el ancho
 * disponible (pedido explicito anterior). Aplicada a las 3 listas de
 * esta pestaña (Servicios, Servicios Adicionales, Kits de limpieza —
 * mismo bug en las 3, la captura solo mostraba la primera).
 *
 * "display:grid" en vez del "flex + justify-content:space-between" de
 * la clase base (2026-08-17, 2do pase "mas profesional", sin captura
 * nueva — encontrado revisando el CSS): con 3 hijos flex y
 * "space-between", la posicion horizontal del precio (el hijo del
 * MEDIO) depende del ancho real de ".asseo-admin-row__main" (nombre +
 * badge de modalidad), que varia de fila a fila ("Jornada Completa
 * Oficina" es mas ancho que "Media Jornada PM") — la columna de precios
 * quedaba escalonada en vez de alineada en una linea recta, como una
 * tabla mal armada. Con grid y una columna "minmax(200px,1fr)" para
 * ".asseo-admin-row__main", su ancho RENDERIZADO es el mismo en todas
 * las filas (lo define el espacio disponible del contenedor, no el
 * largo del texto de esa fila puntual) — precio y boton "Editar" quedan
 * en la misma posicion X en todas las filas, columnas de verdad.
 */
.asseo-admin-row--servicio {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) auto auto;
	align-items: center;
	gap: 16px;
	border-left: none;
	background: #fff;
	border: 1px solid #e0f5f5;
	box-shadow: 0 1px 3px rgba(7, 92, 93, 0.06);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.asseo-admin-row--servicio:hover {
	border-color: var(--asseo-mint);
	box-shadow: 0 4px 14px rgba(7, 92, 93, 0.1);
}

.asseo-admin-eliminar-tooltip {
	display: inline-block;
	cursor: not-allowed;
}

.asseo-admin-dashed-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px dashed var(--asseo-teal);
	border-radius: 12px;
	padding: 10px 18px;
	color: var(--asseo-primary);
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
}

.asseo-admin-dashed-btn:hover {
	background: rgba(7, 92, 93, 0.06);
}

@media (max-width: 640px) {
	.asseo-admin-row {
		align-items: flex-start;
	}

	/*
	 * "Ordename esta visual" (2026-08-22, reportado con captura) — antes
	 * el avatar quedaba solo en su propia linea (con un hueco vacio al
	 * lado) porque el input de nombre de abajo forzaba "flex:1 1 100%"
	 * dentro del MISMO contenedor flex que el avatar: un item al 100% de
	 * ancho nunca cabe junto a otro, asi que el avatar (38px) terminaba
	 * empujado a su propia linea por delante. Ahora avatar+nombre viven
	 * juntos dentro de ".asseo-admin-row__main" (mismo wrapper que ya
	 * usan Agenda/Clientes/Servicios) — el 100% de abajo aplica a ESE
	 * wrapper completo (ver regla generica de ".asseo-admin-row__main"
	 * en este mismo media query), y el input adentro solo necesita
	 * crecer para llenar el espacio que le queda al lado del avatar.
	 */
	.asseo-admin-row--auxiliar .asseo-admin-row__main .asseo-admin-input {
		flex: 1 1 auto;
	}

	/*
	 * 2do ajuste (2026-08-25, reportado con captura: "no esta ordenado y
	 * aparece por encima") — esta tarjeta crecio de 1 select a 2
	 * (Especialidad+Ciudad, agregado el 2026-08-22) sin volver a probar
	 * este breakpoint: ".asseo-admin-input--select" fuerza 240px FIJOS
	 * por select (`flex:0 0 240px !important`, pensado para el ancho de
	 * escritorio) — 2 de esos + la pastilla de calificacion (480px+) ya
	 * no caben en el ancho real de una tarjeta movil, y como
	 * "flex-shrink:0" se los prohibe encogerse, el contenido se
	 * desborda del lado derecho de la tarjeta en vez de ajustarse (la
	 * "aparece por encima" de la captura: el desborde se monta visualmente
	 * sobre lo que sea que haya a la derecha/debajo). Se sobreescribe SOLO
	 * en este contexto (fila de Auxiliares, este breakpoint) a un ancho
	 * flexible que sí puede encogerse — los 2 selects quedan libres de
	 * acomodarse lado a lado en telefonos anchos/tablets, o cada uno en
	 * su propia linea en telefonos angostos, en vez de un ancho fijo que
	 * nunca cede.
	 */
	.asseo-admin-row--auxiliar .asseo-admin-row__auxiliar-meta .asseo-admin-input--select,
	.asseo-admin-row--auxiliar .asseo-admin-row__auxiliar-meta .asseo-custom-select {
		flex: 1 1 140px !important;
		min-width: 140px;
	}

	/*
	 * Excepcion a la regla de arriba para Especialidad/Zona (2026-08-25,
	 * reportado con captura: "— Seleccione especialidad —" partido en 2
	 * lineas dentro de la pastilla) — esta regla de 2026-08-22 se escribio
	 * cuando esos 2 selects todavia eran campos de ANCHO FIJO (240px, ver
	 * mas arriba en el archivo), antes de que este mismo rediseño
	 * (2026-08-25) los convirtiera en "pastillas" de ancho automatico
	 * ("flex:0 0 auto", ver ".asseo-admin-row__auxiliar-meta
	 * .asseo-custom-select:has(> select.asseo-admin-tag-select)" arriba).
	 * "flex:1 1 140px" con encogimiento permitido aprieta la pastilla por
	 * debajo del ancho real de su texto (el placeholder mas largo,
	 * "— Seleccione especialidad —", no entra en 140px); como el texto
	 * sigue siendo "white-space:nowrap" (custom-select.css), no cabe
	 * partirlo en 2 lineas por una regla de wrap — lo que se ve partido es
	 * la pastilla completa desbordandose. Estas 2 pastillas puntuales
	 * (no las demas filas del panel, que si necesitan poder encogerse)
	 * necesitan el mismo "!important" para poder ganarle a la regla de
	 * arriba dentro de este mismo media query — la especificidad extra de
	 * ":has()" ya alcanzaria sin el "!important" de por medio, pero no
	 * contra otra declaracion "!important".
	 */
	.asseo-admin-row--auxiliar .asseo-admin-row__auxiliar-meta .asseo-custom-select:has(> select.asseo-admin-tag-select) {
		flex: 0 0 auto !important;
		min-width: 0;
		max-width: 100%;
	}

	/* La pastilla de calificacion siempre en su PROPIA linea completa,
	   debajo de los 2 selects — antes quedaba tironeada a donde alcanzara
	   el espacio sobrante (a veces pegada a un select, a veces sola),
	   sin ningun criterio consistente de una fila a otra. */
	.asseo-admin-row--auxiliar .asseo-admin-row__auxiliar-meta .asseo-admin-badge-calificacion {
		flex-basis: 100%;
	}

	/*
	 * Grupo de acciones (4 botones-icono + "Eliminar" — crecio de 1 a 4
	 * iconos entre el 2026-08-22 y el 2026-08-23: Documentos, Editar
	 * habilidades, Cambiar contraseña) en su propia linea completa
	 * cuando ni siquiera el ancho real de la tarjeta alcanza para
	 * quedar junto a los toggles (telefonos angostos) — en tarjetas mas
	 * anchas, ".asseo-admin-row__auxiliar-footer" (regla base, ya no
	 * limitada a este breakpoint) ya los reparte lado a lado via
	 * "justify-content:space-between".
	 */
	.asseo-admin-row--auxiliar .asseo-admin-row__actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	/* Alineacion inconsistente del precio en "Servicios y tarifas"
	   (reportado con screenshot): ".asseo-admin-row" reparte
	   "__main"/".asseo-admin-price-field" con "justify-content:
	   space-between" y "flex-wrap: wrap" sin "flex-basis" fijo en
	   ninguno de los 2 — si el nombre del servicio es corto, ambos caben
	   en la misma linea y el precio queda pegado al borde derecho (con
	   un hueco grande antes del "$"); si el nombre es largo, el precio
	   se va solo a su propia linea y queda pegado a la izquierda. El
	   resultado es que cada fila alinea el precio en un punto distinto,
	   segun el largo del nombre — no una alineacion real. Forzar
	   "flex: 1 1 100%" en los 2 los obliga a apilarse SIEMPRE cada uno
	   en su propia linea completa, sin importar el largo del nombre —
	   ya no depende del contenido, el precio cae siempre en el mismo
	   punto (borde izquierdo del bloque). Solo en este breakpoint: en
	   desktop la fila tiene espacio de sobra y el layout lado a lado ya
	   se ve bien. */
	.asseo-admin-row__main {
		flex: 1 1 100%;
	}

	.asseo-admin-row .asseo-admin-price-field {
		flex: 1 1 100%;
		justify-content: flex-start;
	}

	/*
	 * "Servicios y tarifas" en movil (2026-08-22, reportado con
	 * captura: "adaptame esta informacion que quede mejor") — 2
	 * problemas reales, no solo cosmeticos:
	 * 1. El badge de modalidad ("Hogar"/"Oficina") quedaba en la misma
	 *    linea que el titulo para nombres cortos ("Media Jornada
	 *    Oficina PM") pero saltaba a su propia linea para nombres mas
	 *    largos ("Media Jornada Oficina AM") — cada fila alineaba el
	 *    badge en un punto distinto, sin ningun criterio real, solo el
	 *    ancho disponible sobrante. "flex-basis:100%" en el titulo lo
	 *    fuerza a ocupar SIEMPRE toda la fila, empujando el badge a su
	 *    propia linea de abajo en TODOS los casos, sin importar el
	 *    largo del nombre.
	 * 2. El precio y el boton "Editar" caian cada uno en su propia fila
	 *    completa (2 filas para muy poco contenido cada una) porque
	 *    ".asseo-admin-row--servicio" es "display:grid" con una sola
	 *    columna en este breakpoint — un grid de 1 columna pone cada
	 *    hijo en su propia fila por definicion. Con "grid-template-
	 *    areas" el precio y el boton comparten la MISMA fila (precio a
	 *    la izquierda, boton alineado a la derecha), igual de compacto
	 *    que el layout de escritorio pero apilado debajo del bloque
	 *    principal.
	 */
	.asseo-admin-row--servicio .asseo-admin-row__title-line .asseo-admin-row__title {
		flex: 1 1 100%;
	}

	.asseo-admin-row--servicio {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"main main"
			"price actions";
		row-gap: 10px;
	}

	.asseo-admin-row--servicio .asseo-admin-row__main {
		grid-area: main;
	}

	.asseo-admin-row--servicio .asseo-admin-price-field {
		grid-area: price;
		flex: none;
		justify-self: start;
	}

	.asseo-admin-row--servicio .asseo-admin-row__actions {
		grid-area: actions;
		justify-self: end;
	}
}

/* ============ Agenda general: grilla semanal ============ */

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

/* "Eliminar" administrador (2026-08-14, pedido explicito): outline rojo
   #CC0000 — mismo "--asseo-cancelado" ya usado en el Portal para
   "Cancelar reserva"/badge "Cancelada" (rojo semanticamente distinto de
   "--asseo-danger", ver login.css), no un hex nuevo suelto. */
.asseo-btn--outline-eliminar {
	background: #fff !important;
	color: var(--asseo-cancelado) !important;
	border: 1px solid var(--asseo-cancelado) !important;
	box-shadow: none !important;
}

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

/* Reportado como "el boton no funciona" (2026-08-14): funcionaba como
   se pensó (no se puede eliminar la propia cuenta, chequeado tambien
   en el servidor) — el problema real era que "opacity: 0.4" sobre un
   boton ROJO seguia leyendose como un boton rojo normal, un poco mas
   palido, no como "esto esta inerte". Ahora pasa a gris neutro
   (mismo criterio que ".asseo-admin-icon-btn[disabled]", mas abajo en
   este archivo) para que la diferencia con el estado activo sea obvia
   a simple vista, sin depender de notar la opacidad ni de pasar el
   mouse para leer el tooltip ("title", ver PHP, sigue ahi como
   explicacion — esto es el refuerzo visual, no el reemplazo). */
.asseo-btn--outline-eliminar[disabled] {
	opacity: 1;
	cursor: not-allowed;
	pointer-events: none;
	color: #9aa0a6 !important;
	border-color: #d5d8db !important;
	background: #f5f6f7 !important;
}

/* Botones "solidos" (Guardar/Crear/Confirmar/Si-eliminar) dentro de
   CUALQUIER modal del panel pierden border/outline/box-shadow propio
   (2026-08-14, corregido el mismo dia — mismo mecanismo ya encontrado y
   corregido en Auxiliares de limpieza: ".asseo-btn" base trae
   "border:none" SIN "!important", pierde contra lo que sea que el tema/
   navegador aplique). ":not(.asseo-btn--outline)" es a proposito: los
   botones "Cancelar"/"Cerrar" de estos mismos modales SI llevan su propio
   borde intencional (".asseo-btn--outline", ya con "!important") y no
   deben perderlo. */
.asseo-admin-agenda__modal-botones .asseo-btn:not(.asseo-btn--outline),
.asseo-admin-agenda__modal-botones .asseo-btn:not(.asseo-btn--outline):hover,
.asseo-admin-agenda__modal-botones .asseo-btn:not(.asseo-btn--outline):focus,
.asseo-admin-agenda__modal-botones .asseo-btn:not(.asseo-btn--outline):focus-visible,
.asseo-admin-agenda__modal-botones .asseo-btn:not(.asseo-btn--outline):active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.asseo-admin-agenda__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin: 16px 0;
}

.asseo-admin-agenda__nav {
	display: flex;
	align-items: center;
	gap: 12px;
}

.asseo-admin-agenda__rango {
	color: var(--asseo-primary);
	font-size: 14px;
	min-width: 190px;
	text-align: center;
}

.asseo-admin-agenda__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--asseo-primary);
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
}

/* Leyenda envuelta en su propia "card" (2026-08-13, /ui-ux-pro-max: "mas
   profesional") — antes flotaba suelta sobre el fondo degradado de la
   pagina, sin ningun borde que la agrupe como una sola unidad ("Key" de
   un grafico/tabla de datos, ver dominio "chart" de la skill:
   "legend-visible" — agrupada y cerca de la tabla, no dispersa). */
/* "Hay cambios nuevos" (2026-08-26, pedido explicito) — reusa
   ".asseo-portal__notice--ok" tal cual (mismo verde/fondo que
   "Cliente creado."), solo se refuerza el link "Actualizar" de adentro
   para que se note que es clickeable — esa clase base no tiene ningun
   estilo de "a" propio (nunca antes llevo un link adentro). */
[data-agenda-hay-cambios] a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	margin-left: 6px;
}

.asseo-admin-agenda__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin-bottom: 14px;
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 12px;
}

.asseo-admin-agenda__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--asseo-text-secondary);
}

.asseo-admin-agenda__swatch {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: none;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* Alto maximo + scroll vertical propio (2026-08-13, /ui-ux-pro-max) —
   antes crecia sin limite con muchas auxiliares, empujando el resto de
   la pagina cada vez mas abajo. El header queda "sticky" dentro de este
   contenedor (ver mas abajo) para no perder de vista los dias/columnas
   al bajar. */
/*
 * "background" solido, no translucido (2026-08-21, reportado con
 * captura de la columna "Auxiliar": "dejalo fijo con fondo entero") —
 * este contenedor es el eje vertical real de la columna/header
 * "sticky" (los th/td de mas abajo ya llevan su propio fondo solido
 * "!important" para tapar lo que scrollea detras, pero heredaban este
 * "rgba(...,0.55)" translucido como base visual del widget completo:
 * en los bordes/gaps entre celdas (esta tabla usa "border-collapse:
 * separate", cada celda con su propio borde de 1px) se filtraba el
 * fondo del degradado de la pagina por detras, dando un aspecto medio
 * transparente/mezclado en vez de una tarjeta solida. El "glass" (rgba
 * + blur) SI es el look de marca para paneles decorativos (topbar,
 * modales) pero no para una tabla con datos que hay que leer mientras
 * se scrollea.
 */
.asseo-admin-agenda__scroll {
	overflow-x: auto;
	overflow-y: auto;
	max-height: 70vh;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 16px;
	padding: 4px;
}

/* Scrollbar propia (2026-08-13, /ui-ux-pro-max) — el thumb gris del
   sistema operativo (ver screenshot reportado) desentona con el resto
   del panel, ya con su propia paleta de marca en todo lo demas.
   WebKit/Blink solamente (Chrome/Edge/Safari); Firefox no soporta estas
   pseudo-clases y se queda con su barra nativa, degradacion aceptable. */
.asseo-admin-agenda__scroll::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

.asseo-admin-agenda__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.asseo-admin-agenda__scroll::-webkit-scrollbar-thumb {
	background: var(--asseo-mint);
	border-radius: 999px;
}

.asseo-admin-agenda__scroll::-webkit-scrollbar-thumb:hover {
	background: var(--asseo-teal);
}

.asseo-admin-agenda__table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	min-width: 980px;
}

/* Header pegajoso (2026-08-13, /ui-ux-pro-max) — se queda visible al
   bajar dentro de ".asseo-admin-agenda__scroll". El fondo va con
   "!important": mismo motivo ya documentado 2 veces en este archivo
   (columna de auxiliar / celda disponible) — un elemento "sticky"
   necesita un fondo SIEMPRE solido para tapar lo que scrollea debajo, y
   el reset de Hello Elementor se lo pisaba en hover. La sombra suave
   marca la separacion entre encabezado y filas (antes el limite era
   solo un borde blanco de 1px, casi invisible). */
.asseo-admin-agenda__table th {
	background: #eef8f7 !important;
	color: var(--asseo-primary);
	font-size: 12.5px;
	font-weight: 700;
	padding: 9px 6px;
	text-align: center;
	border: none;
	border-bottom: 1px solid #e0f5f5;
	position: sticky;
	top: 0;
	z-index: 3;
}

/*
 * "height:34px" fijo (2026-08-21, reportado con captura: "mira como se
 * ve el AM y PM encima y el color al fondo") — el "top:34px" de la 2da
 * fila sticky (ver regla de abajo) es un numero MAGICO que asume que
 * esta 1ra fila mide exactamente eso de alto; antes dependia solo de
 * "padding:9px 6px" + line-height del texto para llegar a ese numero
 * por casualidad — cualquier diferencia real de fuente/renderizado
 * (ej. movil) corria la 2da fila un par de pixeles, dejando un hueco
 * real donde se alcanzaba a ver el color de las celdas ("disponible"/
 * reserva) que scrollean por detras de las 2 filas sticky. Fijar la
 * altura de verdad (no solo "esperarla" del padding) es lo que hace
 * que "top:34px" sea un valor exacto, no una suposicion.
 */
.asseo-admin-agenda__table thead tr:first-child th {
	top: 0;
	height: 34px;
	box-sizing: border-box;
	white-space: nowrap;
}

.asseo-admin-agenda__table thead tr:last-child th {
	top: 34px;
	box-shadow: 0 2px 4px rgba(7, 92, 93, 0.06);
}

.asseo-admin-agenda__subrow th {
	font-size: 11px;
	font-weight: 600;
	color: var(--asseo-text-secondary);
	background: #f5fbfa !important;
}

.asseo-admin-agenda__col-auxiliar {
	text-align: left !important;
	padding-left: 14px !important;
	min-width: 150px;
	position: sticky;
	left: 0;
	z-index: 2;
}

/* La columna de nombres es sticky en 2 ejes (izquierda Y arriba, ver
   "thead th" arriba) — donde se cruzan (la esquina "Auxiliar") necesita
   el z-index mas alto de la tabla para quedar por encima de ambos
   grupos de celdas que scrollean debajo en sus 2 direcciones. */
.asseo-admin-agenda__table thead th.asseo-admin-agenda__col-auxiliar {
	z-index: 4;
}

/* "!important" en el fondo (2026-08-13, mismo bug que ".celda--
   disponible" mas abajo, reportado con screenshot: "al hacer scroll los
   nombres se pierden"): esta columna es "position: sticky" (queda fija
   mientras el resto de la tabla se desplaza abajo) — necesita un fondo
   SOLIDO en todo momento para tapar lo que scrollea detras. El reset de
   Hello Elementor ("table tbody tr:hover>td", ver nota igual mas abajo)
   le gana al "#fff" de esta clase apenas el cursor pasa sobre la fila
   (algo que pasa seguido justo AL HACER SCROLL con mouse/trackpad sobre
   la tabla) y lo cambia a un gris semitransparente — con la columna
   sticky superpuesta sobre las celdas de color que van scrolleando
   abajo, ese gris deja de tapar del todo y el color/texto de abajo se
   alcanza a ver mezclado con el nombre de la auxiliar. */
/* Sombra en el borde derecho (2026-08-13, /ui-ux-pro-max) — senal visual
   estandar de "esta columna esta fija, el resto se mueve debajo" (mismo
   recurso que usan Sheets/Excel al inmovilizar una columna); antes solo
   tenia un borde #eee identico al resto de la grilla, sin diferenciarse
   como flotante. Color de borde tambien pasa de gris generico (#eee) a
   un teal muy suave de marca (#e0f5f5), igual que el resto del archivo
   despues del pedido "cards y tablas" del punto 5. */
td.asseo-admin-agenda__col-auxiliar {
	background: #fff !important;
	font-weight: 700;
	color: var(--asseo-primary);
	font-size: 13px;
	border: 1px solid #e0f5f5;
	box-shadow: 2px 0 4px rgba(7, 92, 93, 0.05);
}

.asseo-admin-agenda__celda {
	border: 1px solid #e0f5f5;
	padding: 4px;
	min-width: 90px;
	height: 56px;
	vertical-align: top;
}

/* De azul solido SIEMPRE a un tinte suave por defecto + azul solido solo
   al pasar el cursor (2026-08-13, /ui-ux-pro-max: "mas profesional" —
   ver dominio "color", "color-not-decorative-only"/"visual-hierarchy":
   un color fuerte repetido en cada celda vacia de la grilla compite con
   las reservas reales en vez de dejarlas resaltar; el color con
   significado real (azul = "disponible, click para agendar") se
   conserva completo en hover, que es ademas la señal de affordance
   estandar para "esto es clickeable"). El icono sigue en las 2 fases —
   nunca depende solo del color (mismo criterio "color-not-only"). El
   "!important" se mantiene en ambos estados: el reset de Hello Elementor
   ("table tbody tr:hover>td", ya documentado 2 veces en este archivo)
   sigue empatando/ganando en especificidad en el estado hover si no se
   fuerza. */
.asseo-admin-agenda__celda--disponible {
	background: #e8f2fb !important;
	color: #8ab4e0;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.asseo-admin-agenda__celda--disponible:hover,
.asseo-admin-agenda__celda--disponible:focus-visible {
	background: #4a90d9 !important;
	color: #fff;
}

.asseo-admin-agenda__celda--disponible svg {
	margin: 0 auto;
	display: block;
}

/* "Rectangular, radius 8px" (2026-08-13, pedido explicito, reportado con
   screenshot: se veian ovaladas/pildora, no el "6px" que esta clase ya
   tenia) — es un <button>, y el reset de Hello Elementor vuelve a pisar
   el radius aca (mismo conflicto de especificidad ya documentado varias
   veces en este archivo/wizard.css/login.css para botones). !important
   para que el 8px pedido gane de verdad. */
.asseo-admin-agenda__item {
	display: block;
	width: 100%;
	border: none;
	border-radius: 8px !important;
	padding: 6px 8px;
	margin-bottom: 3px;
	color: #fff;
	text-align: left;
	cursor: pointer;
	font-family: "Poppins", sans-serif;
	/* Elevacion sutil (2026-08-13, /ui-ux-pro-max: "elevation-consistent")
	   — antes la reserva quedaba plana, al mismo nivel visual que el
	   fondo de la celda; una sombra chica la separa como una tarjeta
	   real por encima de la grilla. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.asseo-admin-agenda__item:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.asseo-admin-agenda__item:last-child {
	margin-bottom: 0;
}

.asseo-admin-agenda__item-cliente,
.asseo-admin-agenda__item-servicio {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.asseo-admin-agenda__item-cliente {
	font-weight: 800;
	font-size: 11.5px;
}

.asseo-admin-agenda__item-servicio {
	font-size: 10.5px;
	opacity: 0.85;
}

.asseo-admin-agenda__item-check {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	padding: 2px;
	margin-top: 2px;
}

.asseo-admin-agenda__table--ocultar-clientes .asseo-admin-agenda__item-cliente {
	display: none;
}

/* Modales de la agenda (crear/detalle): mismo lenguaje visual que el
   modal de adicionales del wizard de Reservas (overlay oscuro + tarjeta
   blanca + fade-in), con clases propias porque wizard.css no se carga en
   este panel. */
.asseo-admin-agenda__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: asseoAgendaModalFadeIn 0.2s ease both;
}

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

@keyframes asseoAgendaModalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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

.asseo-admin-agenda__modal {
	width: min(480px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	padding: 26px;
	box-shadow: 0 30px 70px rgba(7, 92, 93, 0.35);
}

/*
 * "Dirección guardada" del modal "+ Agendar" (2026-08-26, pedido
 * explicito: "que quede bloqueado como en el formulario del cliente")
 * — mismo criterio EXACTO que ".asseo-wizard__campo-bloqueado"
 * (wizard.css, que no se carga en este panel — ver nota en
 * enqueue_assets()): "pointer-events:none" en vez de "disabled" porque
 * un campo disabled NO se manda con el request AJAX (agenda.js lee
 * ".value" directo de cada campo, no un <form> nativo — mismo problema
 * de fondo, misma solucion). Se aplica TAMBIEN a
 * ".asseo-custom-select__trigger" (mismo bug real ya corregido en
 * wizard.js: bloquear solo el <select> no tiene ningun efecto una vez
 * que custom-select.js lo esconde detras de un boton propio).
 */
.asseo-admin-campo-bloqueado {
	pointer-events: none;
	background: #f0f0f0 !important;
	color: var(--asseo-text-secondary) !important;
	cursor: not-allowed !important;
}

/* Scrollbar delgada propia (2026-08-25, /ui-ux-pro-max) — mismo criterio
   ya usado en ".asseo-custom-select__panel::-webkit-scrollbar": sin
   esto, un modal que crece lo suficiente para necesitar scroll (ej.
   "Días inhabilitados" con varias fechas + los campos Desde/Hasta)
   queda con la barra nativa del sistema operativo, mas ancha y con
   flechas, que desentona con el resto del panel. Solo webkit/blink
   (Chrome/Edge); Firefox se queda con la suya, sin verse mal. */
.asseo-admin-agenda__modal::-webkit-scrollbar {
	width: 6px;
}

.asseo-admin-agenda__modal::-webkit-scrollbar-thumb {
	background: var(--asseo-mint);
	border-radius: 3px;
}

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

.asseo-admin-agenda__modal-sub {
	color: var(--asseo-text-secondary);
	font-size: 13px;
	margin: 0 0 16px;
}

.asseo-admin-agenda__modal label {
	display: block;
	font-weight: 700;
	font-size: 13px;
	color: var(--asseo-primary);
	margin-top: 16px;
	margin-bottom: 12px;
}

/* Sin esto, el primer campo de cada modal (justo debajo del <h3> o de un
   "-sub") heredaria el mismo "margin-top: 16px" de arriba y quedaria con
   demasiado aire respecto al titulo — el gap de arriba ya lo pone
   ".asseo-admin-agenda__modal h3"/"-sub". */
.asseo-admin-agenda__modal h3 + label,
.asseo-admin-agenda__modal-sub + label,
.asseo-admin-agenda__modal label:first-child {
	margin-top: 0;
}

.asseo-admin-agenda__modal label select,
.asseo-admin-agenda__modal label input {
	display: block;
	width: 100%;
	margin-top: 6px;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 10px;
	padding: 9px 12px;
	font-family: "Poppins", sans-serif;
	font-size: 13.5px;
	color: var(--asseo-primary);
	box-sizing: border-box;
}

/*
 * Icono a la izquierda dentro de un campo (2026-08-14, /ui-ux-pro-max,
 * "Crear administrador" — reusable para cualquier otro campo/modal que
 * lo necesite despues, no es exclusivo de este). El wrapper necesita su
 * propio "position:relative" porque el icono/boton de adentro se ubican
 * con "position:absolute" relativo A ESTE elemento, no al <label> ni al
 * modal completo. El input sigue siendo hijo de ".asseo-admin-agenda__modal
 * label" (selector descendiente, no se rompe por el wrapper intermedio)
 * — solo se le agrega el padding-left/right que faltaba, con un
 * selector mas especifico para ganarle al padding parejo de la regla
 * generica de arriba sin necesitar "!important".
 */
.asseo-admin-field-icon {
	position: relative;
	display: block;
}

.asseo-admin-agenda__modal label .asseo-admin-field-icon input {
	padding-left: 38px;
}

.asseo-admin-field-icon__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--asseo-mint);
	pointer-events: none;
}

/* Solo los campos de contraseña llevan boton de mostrar/ocultar — el
   selector "[data-password-input]" evita que Nombre/Correo (sin boton)
   queden con un padding-derecho de mas que no usan para nada. */
.asseo-admin-agenda__modal label .asseo-admin-field-icon input[data-password-input] {
	padding-right: 38px;
}

/* Boton "mostrar/ocultar contraseña" (2026-08-14, pedido explicito de la
   skill de UX: "password-toggle" — evita errores de tipeo en un campo
   que de otra forma no se puede verificar visualmente antes de enviar
   el formulario). "!important" en fondo/borde: es un <button>, mismo
   conflicto de especificidad contra el reset de Elementor ya documentado
   extensamente en este archivo para CUALQUIER <button> con una sola
   clase propia. */
.asseo-admin-field-icon__toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: none !important;
	border: none !important;
	border-radius: 6px;
	padding: 0 !important;
	color: var(--asseo-text-secondary) !important;
	cursor: pointer;
}

.asseo-admin-field-icon__toggle:hover {
	color: var(--asseo-primary) !important;
	background: rgba(7, 92, 93, 0.06) !important;
}

/* Texto de ayuda persistente bajo "Contraseña" (2026-08-14, pedido
   explicito de la skill de UX: "input-helper-text" — el minimo de 8
   caracteres ya se exigia via "minlength", pero el usuario no lo veia
   hasta despues de un error de envio). Reset propio de weight/size/color:
   sin esto hereda el mismo bold teal 13px del <label> (ver
   ".asseo-admin-agenda__modal label" arriba), demasiado pesado para un
   texto secundario. */
.asseo-admin-field-helper {
	display: block;
	margin-top: 5px;
	font-weight: 500;
	font-size: 11.5px;
	color: var(--asseo-text-secondary);
}

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

.asseo-direccion-fields__row > label {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

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

/* "# Complemento *" es el texto mas largo de las 3 etiquetas de esta
   fila (mas largo incluso que "Tipo de vía *") — sin esto el "*" se
   quedaba sin espacio y saltaba a una segunda linea. */
.asseo-direccion-fields__row--principal > label {
	white-space: nowrap;
}

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

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

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

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

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

/* Bloques "Cliente"/"Servicio"/"Dirección"/"Notas y facturación"
   (2026-08-17, /ui-ux-pro-max, "mas profesional") — antes las 16 filas
   de este modal eran una sola lista plana, todas con el mismo peso
   visual, sin ninguna separacion entre "quien es el cliente" y "cuanto
   costo". El divisor es el mismo mint claro que ya usa el resto del
   panel (#e0f5f5, ver ".asseo-admin-agenda__celda"), no un color nuevo;
   la etiqueta de cada bloque reusa el estilo ya establecido para
   "legend" en ".asseo-admin-editor-fieldset legend" (bold/13px/teal),
   solo que en mayusculas + letter-spacing para que se lea como titulo
   de seccion y no como otro campo mas de la lista. */
.asseo-admin-agenda__detalle-grupo {
	padding: 10px 0;
	border-bottom: 1px solid #e0f5f5;
}

.asseo-admin-agenda__detalle-grupo:first-of-type {
	padding-top: 0;
}

.asseo-admin-agenda__detalle-grupo:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.asseo-admin-agenda__detalle-grupo h4 {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--asseo-accent);
}

.asseo-admin-agenda__detalle-lista {
	margin: 0;
}

.asseo-admin-agenda__detalle-lista dt {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--asseo-text-secondary);
	margin-top: 8px;
}

.asseo-admin-agenda__detalle-lista dd {
	margin: 2px 0 0;
	font-weight: 700;
	color: var(--asseo-primary);
	font-size: 14px;
}

/* Campos de texto libre del detalle completo de la reserva (2026-08-13,
   pedido explicito: indicaciones/minuta/referencias/notas) — el peso
   700 + 14px que usan los datos cortos (cliente, telefono, total) se ve
   pesado en un parrafo largo; texto normal, un poco mas chico, con
   salto de linea real (los otros "dd" son de una sola linea). */
.asseo-admin-agenda__detalle-lista dd.asseo-admin-agenda__detalle-lista--texto {
	font-weight: 500;
	font-size: 13px;
	white-space: pre-wrap;
}

.asseo-admin-agenda__modal-aviso {
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 12.5px;
	margin: 0 0 14px;
}

.asseo-admin-agenda__modal-error {
	background: #fdecea;
	color: var(--asseo-danger);
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 12.5px;
	margin: 0 0 14px;
}

/*
 * Precio informativo con descuento por frecuencia (2026-08-20, pedido
 * explicito) — misma paleta ya usada para el bloque equivalente del
 * wizard del cliente ("¿Necesitas una mayor frecuencia?", ver
 * wizard.css), para que se lea como el mismo concepto en los 2 lugares
 * del plugin.
 */
.asseo-admin-agenda__modal-precio {
	background: #e8f5f5;
	border-left: 3px solid #075c5d;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 12.5px;
	color: #4a5568;
	margin: -6px 0 14px;
}

.asseo-admin-agenda__modal-botones {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.asseo-admin-agenda__modal-botones .asseo-btn {
	flex: 1;
	text-align: center;
}

@media (max-width: 640px) {
	.asseo-admin-agenda__toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Modal "Detalle del servicio" (2026-08-18, reportado con captura: en
	   pantallas angostas los 3 botones en fila no alcanzaban a mostrar el
	   texto completo — "Cancelar reserva" quedaba cortado y el modal
	   sacaba scroll horizontal). Apilados full-width evitan el corte sin
	   tocar la version de escritorio (fila, ver regla base arriba). */
	.asseo-admin-agenda__modal-botones {
		flex-direction: column;
	}

	.asseo-admin-agenda__modal-botones .asseo-btn {
		width: 100%;
		box-sizing: border-box;
	}
}

/* Footer del modal "Detalle del servicio" (2026-08-18, pedido explicito
   con propiedades exactas, 2da ronda — reemplaza el ajuste anterior de
   esta misma entrada): a diferencia de los otros 8 modales que comparten
   ".asseo-admin-agenda__modal-botones" (fila flex:1 a ancho completo, o
   columna en mobile — ver arriba), este usa padding/font-size mas
   compactos para entrar en una sola fila. Selector combinado
   ".modal-botones.modal-botones--reserva" (mas especifico que la regla
   base Y que la de mobile de arriba) para que esto aplique sin tocar los
   otros 8 modales. "nowrap" pedido explicitamente, pero con los 3 textos
   reales en español la fila mide ~450px — mas angosto que ~375px de
   mobile, asi que "wrap" queda de respaldo por defecto y "nowrap" solo se
   fuerza desde 481px en adelante (confirmado con el usuario antes de
   implementar). */
.asseo-admin-agenda__modal-botones.asseo-admin-agenda__modal-botones--reserva {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
}

@media (min-width: 481px) {
	.asseo-admin-agenda__modal-botones.asseo-admin-agenda__modal-botones--reserva {
		flex-wrap: nowrap;
	}
}

.asseo-admin-agenda__modal-botones.asseo-admin-agenda__modal-botones--reserva .asseo-btn {
	flex: 0 0 auto;
	width: auto;
	padding: 10px 20px;
	font-size: 14px;
	box-sizing: border-box;
}

/* Mismo alto para los 3 (pedido explicito): "Cerrar"/"Guardar cambios"
   comparten ".asseo-btn--outline" (border 1.5px ya incluido), pero
   "Cancelar reserva" (".asseo-btn--danger") no declara borde propio —
   sin esto quedaria 3px mas bajo que los otros 2 (1.5px arriba + 1.5px
   abajo de diferencia). Transparente: no cambia el look solido pedido,
   solo iguala el espacio que ocupa la caja. */
.asseo-admin-agenda__modal-botones--reserva [data-agenda-detalle-cancelar] {
	border: 1.5px solid transparent !important;
}

/* "Cerrar" debe verse mas chico/subordinado que "Guardar cambios"
   (pedido explicito) aunque ambos compartan ".asseo-btn--outline" y el
   mismo padding/alto — la diferencia es de color, no de tamaño: gris
   neutro en vez del teal de marca, mismos grises ya usados en
   ".asseo-btn--outline-eliminar[disabled]" mas arriba en este archivo. */
.asseo-admin-agenda__modal-botones--reserva [data-agenda-modal-cerrar] {
	color: #6b7280 !important;
	border-color: #d5d8db !important;
}

/* Mismo criterio de subordinacion que arriba, aplicado a "Cerrar" del
   modal "Días inhabilitados" (2026-08-25, /ui-ux-pro-max) — ese modal
   solo tiene un boton en el footer, pero SI compite visualmente contra
   "+ Agregar" (la accion real de la pantalla, ver
   ".asseo-admin-inhabilitados-agregar .asseo-btn"), asi que igual le
   conviene leerse como secundario. */
[data-inhabilitados-auxiliar-cerrar] {
	color: #6b7280 !important;
	border-color: #d5d8db !important;
}

[data-inhabilitados-auxiliar-cerrar]:hover {
	background: #f5f6f7 !important;
	color: #4b5563 !important;
	border-color: #c2c7cc !important;
}

.asseo-admin-agenda__modal-botones--reserva [data-agenda-modal-cerrar]:hover {
	background: #f5f6f7 !important;
	color: #4b5563 !important;
	border-color: #c2c7cc !important;
}

/* ================================================================
 * Modales "Editar" de Servicios / Servicios Adicionales / Kits de
 * limpieza (2026-08-13, pedido explicito). Reusan
 * ".asseo-admin-agenda__modal-overlay/__modal" (mismo lenguaje visual
 * que los modales de Agenda/Auxiliar), pero necesitan overrides propios
 * porque ".asseo-admin-agenda__modal label input" (arriba) fue pensado
 * solo para <select>/<input type=text|number> — sin estos overrides,
 * los checkboxes y el toggle switch de aca adentro quedarian
 * deformados (esa regla les pone width:100%+borde, como si fueran
 * campos de texto).
 * ================================================================ */

.asseo-admin-agenda__modal--ancho {
	width: min(560px, 100%);
}

/* Modal "Editar habilidades destacadas" (2026-08-14, pedido explicito):
   min-width 420px para que "Guardar cambios" (ahora a 140px fijos, ver
   ".asseo-admin-agenda__modal-botones--habilidades") no se corte contra
   el borde del modal en pantallas donde el "width: min(480px, 100%)"
   de la clase base terminaria calculando algo mas angosto que eso;
   "min-width" no reemplaza ese "width", solo le pone un piso — sigue
   encogiendo hasta 100% en pantallas mas angostas que 420px+padding,
   tal cual se pidio (no se agrego ningun tope adicional para eso). */
.asseo-admin-agenda__modal--habilidades {
	min-width: min(420px, 100%);
	padding: 28px;
}

.asseo-admin-agenda__modal label textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 10px;
	padding: 9px 12px;
	font-family: "Poppins", sans-serif;
	font-size: 13.5px;
	color: var(--asseo-primary);
	box-sizing: border-box;
	resize: vertical;
}

.asseo-admin-editor-fila {
	display: flex;
	gap: 14px;
}

.asseo-admin-editor-fila label {
	flex: 1;
}

.asseo-admin-editor-fieldset {
	border: 1.5px solid var(--asseo-mint);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 14px;
}

.asseo-admin-editor-fieldset legend {
	font-weight: 700;
	font-size: 13px;
	color: var(--asseo-primary);
	padding: 0 4px;
}

/*
 * Dias/horas de "Editar servicio" pasan de checkbox nativo (sin ningun
 * estilo propio — se veian como controles crudos del navegador, unico
 * elemento sin pulir en un modal donde el resto de los campos SI tiene
 * diseño propio, reportado con captura 2026-08-17 /ui-ux-pro-max) a
 * chips/pastillas seleccionables — mismo MECANISMO ya probado en
 * ".asseo-admin-habilidad-item" (checkbox real escondido, el estado
 * marcado lo comunica el fondo/borde de la pastilla via ":has()", anillo
 * de foco visible para teclado), solo que en forma compacta de pastilla
 * en vez de card con icono — "Lunes a viernes"/"08:00" son textos
 * cortos que no necesitan el espacio de una card grande, y varias
 * pastillas envolviendo en fila ("flex-wrap") ocupan mucho menos alto
 * que una lista de 5 checkboxes apilados verticalmente.
 */
.asseo-admin-editor-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.asseo-admin-agenda__modal label.asseo-admin-editor-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--asseo-mint);
	background: #fff;
	color: var(--asseo-primary);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.asseo-admin-editor-chip:hover {
	border-color: var(--asseo-accent);
}

.asseo-admin-editor-chip:has(.asseo-admin-editor-chip-input:checked) {
	background: var(--asseo-primary);
	border-color: var(--asseo-primary);
	color: #fff;
}

/* Mismo anillo de foco ya usado en ".asseo-admin-habilidad-item" —
   consistencia (el checkbox real esta oculto, sin esto el foco por
   teclado no se veria en ningun lado). */
.asseo-admin-editor-chip:has(.asseo-admin-editor-chip-input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(23, 174, 162, 0.35);
}

/* "[type=radio]" sumado (2026-08-26, selector Persona Natural/Jurídica
   de "Agregar cliente") — mismo componente visual ".asseo-admin-editor-
   chip" que ya usan Días/Horas (checkbox, elección múltiple), reusado
   acá con radios para una elección única — la regla de ocultar el
   control nativo real ya existía solo para "[type=checkbox]". */
.asseo-admin-agenda__modal .asseo-admin-editor-chip-input[type="checkbox"],
.asseo-admin-agenda__modal .asseo-admin-editor-chip-input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	border: none;
	padding: 0;
}

.asseo-admin-agenda__modal label input[type="checkbox"] {
	display: inline-block;
	width: auto;
	margin: 0;
	border: none;
	padding: 0;
	box-shadow: none;
}

.asseo-admin-editor-lista-dinamica {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.asseo-admin-editor-lista-fila {
	display: flex;
	align-items: center;
	gap: 8px;
}

.asseo-admin-editor-lista-fila input {
	flex: 1;
	margin: 0 !important;
}

/*
 * "Quitar item" (boton "×" de "Qué incluye"/listas dinamicas,
 * 2026-08-17, /ui-ux-pro-max, con captura: se veian como pildoras teal
 * grandes con borde rosado, "sin alinear" con su input). El diseño de
 * abajo (28x28, cuadrado, borde rojo sutil) YA ERA el correcto — nunca
 * se aplicaba de verdad. Causa real, mismo mecanismo ya documentado
 * muchas veces en este archivo para <button>: el reset del TEMA Hello
 * Elementor pone "border:1px solid #c36" (ese rosado/magenta) en
 * cualquier "[type=button]" sin "!important" ganandole a un selector
 * de 1 sola clase, y el KIT de Elementor pone "border-radius:50px" +
 * "padding:15px 30px" + "background-color" propio encima de eso — entre
 * los 2, el boton se infla a pildora grande, tapando el tamaño real de
 * 28px y haciendo que la fila se vea despareja (el input no crece, el
 * boton si). "!important" en TODO lo que define forma/tamaño/color
 * corrige los 2 problemas a la vez: tamaño real (alineacion) y color de
 * borde real (rojo, no rosado).
 */
.asseo-admin-editor-quitar {
	flex: none;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border-radius: 8px !important;
	border: 1px solid rgba(192, 57, 43, 0.3) !important;
	background: #fff !important;
	color: var(--asseo-danger) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer;
}

.asseo-admin-editor-quitar:hover {
	background: rgba(192, 57, 43, 0.08) !important;
	border-color: var(--asseo-danger) !important;
}

.asseo-admin-editor-agregar {
	width: 100%;
	justify-content: center;
}

/* Toggle switch dentro de un modal de Editar (Activo/Inactivo) — mismo
 * componente que ya usa la fila de Auxiliares de limpieza, con su
 * checkbox real escondido reforzado aca para que gane sobre el
 * "label input[type=checkbox]" generico de arriba. */
/*
 * "Activo" del modal "Editar servicio" se veia cortado ("Ac" + un
 * fragmento, reportado con captura 2026-08-17) — ".asseo-admin-toggle-
 * switch" es un <label>, y ".asseo-admin-agenda__modal label" (generica,
 * mas arriba en este archivo) le pisaba "display:inline-flex" por
 * "display:block" (mayor especificidad: 1 clase + 1 tag le gana a 1
 * clase sola) — el toggle perdia su layout de fila (checkbox oculto +
 * pastilla + texto en linea) y quedaba roto. Nunca se habia visto este
 * choque antes porque este componente se creo para la fila de
 * Auxiliares de limpieza (fuera de ".asseo-admin-agenda__modal"); esta
 * es la primera vez que se reusa DENTRO de un modal. "display" se suma
 * aca porque este selector (2 clases) ya tenia suficiente especificidad
 * para ganarle a la regla generica (el "margin" de abajo ya lo probaba),
 * solo faltaba pedirlo. */
.asseo-admin-agenda__modal .asseo-admin-toggle-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 16px;
}

.asseo-admin-agenda__modal .asseo-admin-toggle-switch input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	border: none;
	padding: 0;
}

.asseo-admin-toggle-switch__texto {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--asseo-text-secondary);
}

/*
 * Cards seleccionables de "Editar habilidades destacadas" (2026-08-14,
 * pedido explicito: "mismo estilo que las cards de adicionales del
 * modulo de reservas") — valores calcados 1:1 de
 * ".asseo-wizard__adicional-item"/":has(checkbox:checked)" en
 * wizard.css (border 1.5px mint / radius 16px / padding 12px sin
 * seleccionar; border 2px #075c5d + fondo #e8f5f5 + padding 11.5px
 * seleccionada, mismo truco de compensar el 0.5px extra del borde para
 * que el contenido no salte de posicion). No se reusa la clase de
 * wizard.css directamente porque panel-admin-app.css no depende de
 * wizard.css (paneles distintos) — se duplican los valores exactos a
 * proposito, no una referencia cruzada entre hojas de estilo separadas.
 */
/* Aviso bajo el campo Nombre del modal "Editar auxiliar" (2026-08-25,
   pedido explicito de sumar el nombre a este modal) — el boton "Guardar
   cambios" de este modal solo persiste habilidades via AJAX; el nombre
   se sincroniza en el listado pero recien se guarda de verdad con
   "Guardar cambios" de arriba del listado (ver auxiliares.js). Mismo
   tamaño/tono que el resto de textos de ayuda de este panel (ver
   ".asseo-admin-row__auxiliar-zona-aviso"), un margen negativo chico
   para pegarlo al campo de arriba en vez del "margin-bottom:12px" que
   trae todo <label> dentro de un modal. */
.asseo-admin-habilidades-nombre-ayuda {
	margin: -8px 0 16px;
	font-size: 11.5px;
	color: var(--asseo-text-secondary);
}

/* Modal "Días inhabilitados" (2026-08-25, pedido explicito). Lista
   compacta, cada fila = fecha (+ motivo si tiene) + boton chico de
   quitar — mismo criterio visual que el resto de listas del panel
   (fondo suave + borde redondeado), pero mas angosta porque vive
   ADENTRO de un modal, no es una tarjeta completa como
   ".asseo-admin-row". */
.asseo-admin-inhabilitados-lista {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 220px;
	overflow-y: auto;
}

.asseo-admin-inhabilitados-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	background: var(--asseo-bg-light-2);
	border-radius: 8px;
	font-size: 13px;
	color: var(--asseo-primary);
}

/*
 * "!important" en forma/apariencia (2026-08-25, bug real reportado con
 * captura: aro rosado alrededor del boton + icono descentrado) — a este
 * boton le faltaban las mismas protecciones que YA tiene
 * ".asseo-admin-icon-btn" mas arriba en este archivo contra el reset
 * global de Hello Elementor ("[type=button],button{padding:.5rem
 * 1rem;border:1px solid #c36}", memoria ya documentada en este plugin):
 * sin "padding:0 !important" ese ".5rem 1rem" entraba DENTRO de una caja
 * fija de 26x26px, empujando el icono fuera de centro; sin "border:none
 * !important" ganaba el borde rosado "#c36" de ese mismo reset.
 */
.asseo-admin-inhabilitados-quitar {
	flex: none;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--asseo-text-secondary) !important;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	line-height: 0;
	box-shadow: none !important;
	outline: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.asseo-admin-inhabilitados-quitar:hover,
.asseo-admin-inhabilitados-quitar:focus-visible {
	background: #FEE2E2 !important;
	color: #DC2626 !important;
}

/* Formulario "Agregar" del mismo modal — fecha + motivo lado a lado en
   pantallas anchas (mismo criterio "flex-wrap" que el resto del panel:
   se apilan solos en angostas, sin necesitar un media query aparte). */
/*
 * Calendario propio, seleccion MULTIPLE (2026-08-25, pedido explicito) —
 * mismo lenguaje visual que ".asseo-wizard__calendario" del wizard de
 * Reservas (wizard.css), pero con clases propias porque wizard.css no se
 * carga en este panel (mismo criterio ya documentado para los modales de
 * Agenda). Los botones de dia/navegacion llevan "!important" en forma/
 * apariencia por el mismo motivo ya documentado varias veces en este
 * archivo: reset global de Hello Elementor
 * ("[type=button],button{padding:.5rem 1rem;border:1px solid #c36}"),
 * misma especificidad que un selector de una clase, gana el que carga
 * despues si no se refuerza.
 */
.asseo-admin-calendario {
	border: 1.5px solid var(--asseo-mint);
	border-radius: 14px;
	padding: 14px;
	margin-top: 6px;
}

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

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

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

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

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

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

.asseo-admin-calendario__vacio {
	aspect-ratio: 1;
}

.asseo-admin-calendario__dia {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 1;
	width: 100%;
	padding: 0 !important;
	margin: 0;
	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;
	box-shadow: none !important;
	position: relative;
}

button.asseo-admin-calendario__dia {
	cursor: pointer;
}

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

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

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

/* Punto discreto para dias YA inhabilitados (2026-08-25) — se pueden
   volver a elegir (agregar_fecha_inhabilitada() ya es idempotente, solo
   actualiza el motivo), pero conviene que el admin vea de un vistazo
   cuales ya estaban marcados antes de sumar mas. */
.asseo-admin-calendario__dia.is-existente::after {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--asseo-teal);
}

.asseo-admin-calendario__dia.is-selected.is-existente::after {
	background: #fff;
}

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

.asseo-admin-inhabilitados-agregar {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin: 10px 0 16px;
}

.asseo-admin-inhabilitados-agregar label {
	flex: 1 1 140px;
	margin-bottom: 0;
}

/* Un poco mas chico que el default de ".asseo-btn" (2026-08-25, pedido
   explicito con captura) — ese default (15px/0.8em 1.8em) pensado para
   botones de ancho completo se veia grande al lado de campos de fecha
   compactos en esta misma fila. */
.asseo-admin-inhabilitados-agregar .asseo-btn {
	flex: none;
	font-size: 13.5px;
	padding: 0.55em 1.3em;
}

.asseo-admin-habilidades-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin: 4px 0 16px;
}

.asseo-admin-agenda__modal label.asseo-admin-habilidad-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Reportado con captura ("los textos estan mal"): en el grid, las 2
	   cards quedan de la MISMA altura (CSS Grid estira las filas por
	   defecto), pero "Planchado" (sin icono, 1 sola linea) y
	   "Preparación de alimentos" (icono + texto, 2 lineas) NO ocupan el
	   mismo espacio interno — sin esto, el contenido se alinea arriba
	   por defecto y el texto de cada card queda en una altura distinta.
	   "justify-content:center" centra el contenido de cada card
	   verticalmente dentro de esa altura pareja, sin importar cuantas
	   lineas tenga (con o sin icono). */
	justify-content: center;
	gap: 6px;
	background: #fff;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 16px;
	padding: 12px;
	margin: 0;
	font-weight: 600;
	color: var(--asseo-primary);
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(7, 92, 93, 0.06);
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.asseo-admin-habilidad-item:hover {
	box-shadow: 0 4px 12px rgba(7, 92, 93, 0.1);
}

.asseo-admin-habilidad-item:has(.asseo-admin-habilidad-checkbox:checked) {
	border: 2px solid #075c5d;
	background: #e8f5f5;
	padding: 11.5px;
}

/* Anillo de foco visible (2026-08-17, /ui-ux-pro-max — accesibilidad:
   "focus-states") — el checkbox real esta escondido a 1x1px (ver mas
   abajo), asi que sin esto alguien navegando con teclado no ve NINGUNA
   señal de cual card tiene el foco. Mismo azul-verde y mismo valor de
   sombra que ".asseo-admin-input:focus" (mas arriba en este archivo),
   por consistencia con el otro anillo de foco ya agregado en este panel. */
.asseo-admin-habilidad-item:has(.asseo-admin-habilidad-checkbox:focus-visible) {
	box-shadow: 0 0 0 3px rgba(23, 174, 162, 0.35);
}

/* Icono SVG real (2026-08-17, antes era un emoji/texto plano — ver
   comentario en class-cpt-auxiliares.php). "currentColor" en el SVG
   (Asseo_App_Portal_Dashboard::icon()) ya hereda el teal de
   ".asseo-admin-habilidad-item", no hace falta fijar color aca. */
.asseo-admin-habilidad-icono {
	display: flex;
}

.asseo-admin-habilidad-texto {
	font-size: 13px;
}

/* Checkbox real, escondido — el estado seleccionado lo comunica el
 * borde/fondo de la card (arriba), no un checkmark propio (no se
 * pidio). Especificidad reforzada (2 clases + atributo) para ganarle
 * al reset generico ".asseo-admin-agenda__modal label input[type=
 * checkbox]" de mas arriba, mismo criterio que ya usa
 * ".asseo-admin-toggle-switch input[type=checkbox]". */
.asseo-admin-agenda__modal .asseo-admin-habilidad-checkbox[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	border: none;
	padding: 0;
}

/* Botones "Cancelar"/"Guardar cambios" del modal de habilidades
 * (2026-08-14, pedido explicito: mismo ancho fijo, 140px, en vez del
 * "flex:1" que reparte el ancho disponible por igual — ver
 * ".asseo-admin-agenda__modal-botones .asseo-btn" mas abajo, compartida
 * por TODOS los modales de este panel, no se toco esa regla general).
 * Efecto colateral de ese ancho fijo, corregido 2026-08-17 (reportado
 * con captura): al no llenar el ancho del modal, el "justify-content"
 * por defecto del flex contenedor (".asseo-admin-agenda__modal-botones",
 * sin esa propiedad declarada) deja los 2 botones pegados a la
 * izquierda con un hueco vacio a la derecha. En el resto de modales no
 * se nota porque sus botones usan "flex:1" y llenan todo el ancho — acá
 * se centra solo este par, sin tocar la regla compartida. */
.asseo-admin-agenda__modal-botones--habilidades {
	justify-content: center;
}

/* "Copiar informacion" del modal "Detalle del servicio" (2026-08-17,
   pedido explicito) — header propio (titulo + boton) porque el resto de
   modales de este panel solo tienen un <h3> suelto, sin nada al lado.
   Se probo un grid de 3 columnas para centrar el boton en todo el header
   (2026-08-18) pero se revirtio a flex + space-between por pedido
   explicito — boton pegado al borde derecho, no centrado en el header. */
.asseo-admin-agenda__modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.asseo-admin-agenda__modal-header h3 {
	margin: 0;
}

/* !important en fondo/borde/color/display (2026-08-17, ampliado
   2026-08-18 "el texto no esta centrado") — mismo motivo ya documentado
   varias veces en este archivo (".asseo-admin-icon-btn",
   ".asseo-btn--outline-eliminar", etc.): el reset de Hello Elementor
   para "button"/"[type=button]" tiene la MISMA especificidad (0,1,0) que
   esta clase sola y pisa estas propiedades si no se refuerzan. Al ppio
   solo se reforzo border/background/color/border-radius/padding —
   faltaba "display": el reset trae "display:inline-block" +
   "text-align:center", y si esa regla ganaba la cascada (orden de carga
   no garantizado, ver comentarios de mas abajo en este mismo archivo con
   el mismo problema), el boton dejaba de ser flex — "align-items:center"
   no hace nada sin flex, y el icono/texto quedaban como contenido inline
   normal, sin centrar de verdad entre si verticalmente. */
.asseo-admin-agenda__copiar-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	flex: none;
	border: 1.5px solid var(--asseo-mint) !important;
	background: #fff !important;
	color: var(--asseo-primary) !important;
	border-radius: 999px !important;
	padding: 6px 14px !important;
	font-family: "Poppins", sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.asseo-admin-agenda__copiar-btn:hover {
	background: #e8f5f5 !important;
}

.asseo-admin-agenda__copiar-btn svg {
	display: block;
	flex: none;
}

/* Estado "Copiado" (2 segundos, ver agenda.js) — verde solido, mismo
   criterio de "exito" que ya usa ".asseo-portal__notice--ok" en el resto
   del plugin (#2e7d32), no un verde nuevo inventado. */
.asseo-admin-agenda__copiar-btn--copiado {
	background: #2e7d32 !important;
	border-color: #2e7d32 !important;
	color: #fff !important;
}

/* Reportado con captura: "Guardar cambios" se cortaba dentro de los
   140px — ".asseo-btn" base trae "padding: 0.8em 1.8em" (pensado para
   CTAs de pagina completa, mucho mas ancho que este modal), que a
   font-size normal (15px) no le deja espacio de sobra a un texto de 15
   caracteres en una caja de 140px: se ve recortado en vez de envolver
   o encogerse. Se reduce el padding horizontal y el tamaño de fuente
   SOLO para estos 2 botones — siguen midiendo lo mismo entre si
   (140px), que era el pedido real ("verse balanceados"), pero ahora el
   texto entra completo en una sola linea. */
.asseo-admin-agenda__modal-botones--habilidades .asseo-btn {
	flex: 0 0 140px;
	width: 140px;
	padding: 0.75em 0.5em !important;
	font-size: 13.5px;
	white-space: nowrap;
}

/* Fix responsividad (2026-08-19, auditoria de responsividad de los 4
   modulos): con el "min-width" del modal ahora limitado a "min(420px,
   100%)" (ver ".asseo-admin-agenda__modal--habilidades" arriba), en
   pantallas angostas el modal ya no fuerza 420px de ancho fijo, pero
   estos 2 botones si seguian fijos a 140px cada uno (280px + gap 10px
   = 290px), mas ancho que el contenido disponible del modal en
   celulares chicos (~320px de viewport). Se reparten el ancho
   disponible en partes iguales en vez de un ancho fijo. */
@media (max-width: 480px) {
	.asseo-admin-agenda__modal-botones--habilidades .asseo-btn {
		flex: 1 1 0;
		width: auto;
	}
}

/* Badge "Inactivo" (Servicios Adicionales/Kits, listado del Panel
 * Admin) — mismo tamaño/forma que ".asseo-admin-badge-modalidad", tono
 * gris neutro en vez de teal/morado (no es una modalidad, es un
 * estado). */
.asseo-admin-badge-inactivo {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	background: #f1f1f1;
	color: #6b6b6b;
}

/* Badge "Agotado" (Servicios y tarifas, listado del Panel Admin,
 * 2026-08-17, pedido explicito) — mismo tamaño/forma que las demas
 * badges de esta lista, tono de advertencia (--asseo-warning-*, ya
 * usado en el resto del plugin) en vez de gris: a diferencia de
 * "Inactivo", esto necesita llamar la atencion del admin porque el
 * servicio sigue visible para el cliente. */
.asseo-admin-badge-agotado {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	background: var(--asseo-warning-bg);
	color: var(--asseo-warning-text);
}

/* Subtitulo de sub-seccion ("Servicios Adicionales"/"Kits de limpieza"
 * dentro de la pestaña "Servicios y tarifas") — mas chico que el <h2>
 * principal de la pestaña, con espacio propio arriba para separarse de
 * la lista de Servicios. */
.asseo-admin-section-header--sub {
	margin-top: 32px;
}

.asseo-admin-section-header--sub h3 {
	margin: 0 0 4px;
	color: var(--asseo-primary);
	font-weight: 800;
	font-size: 16px;
}

/* ============ Reportes: tablas "Servicios del mes por tipo" /
   "Ingresos por semana" (2026-08-14, pedido explicito) ============ */
/* "1fr 1fr" fijo, no "auto-fit/minmax" (2026-08-14, pedido explicito) —
   la version responsive anterior podia dejar las 2 tarjetas con anchos
   ligeramente distintos segun el contenido; esto las fuerza a ser
   EXACTAMENTE iguales en pantallas anchas. El quiebre a 1 columna en
   movil (mas abajo, @media max-width:640px) sigue igual. */
.asseo-admin-reportes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 20px;
}

.asseo-admin-report-card {
	background: #fff;
	border: 1px solid #e0f5f5;
	border-radius: 12px;
	/* Padding asimetrico (2026-08-14, 2do ajuste el mismo dia, con
	   captura — el primer intento a 28px no se notaba lo suficiente):
	   "20px" parejo dejaba la ultima fila de la tabla (sin border-bottom
	   propio, ver ".asseo-admin-report-table tbody tr:last-child td")
	   pegada al borde inferior de la tarjeta — el mismo padding se sentia
	   suficiente arriba (separa el <h3> del borde) pero corto abajo,
	   despues de una tabla densa. */
	padding: 20px 20px 40px;
}

.asseo-admin-report-card h3 {
	/* !important en color/weight/size: mismo mecanismo del Kit de
	   Elementor documentado en el resto de este plugin — ".clase-propia
	   h3" (una clase + un tag) pierde por especificidad contra
	   ".elementor-kit-832 h3" si no se fuerza. */
	margin: 0 0 14px !important;
	color: var(--asseo-primary) !important;
	font-weight: 800 !important;
	font-size: 15px !important;
}

.asseo-admin-report-card__scroll {
	overflow-x: auto;
}

.asseo-admin-report-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 400px;
}

/* table th/td del tema Hello Elementor traen "border:1px solid
   hsla(0,0%,50%,.502)" en las 4 caras (reset.css del tema, mismo hallazgo
   que el zebra-striping de mas arriba) — sin este reset, esa linea
   grisacea/negruzca queda visible en los bordes IZQUIERDO/DERECHO de
   cada celda, mas notoria en el borde derecho de la ultima columna (no
   tiene ninguna celda vecina con la que "fundirse" via border-collapse,
   reportado con captura 2026-08-14). Une para ambas tablas, antes de que
   cada selector mas especifico (th, td, fila de totales) agregue el
   borde que SI quiere (bottom/top). */
.asseo-admin-report-table th,
.asseo-admin-report-table td {
	border-left: none !important;
	border-right: none !important;
}

.asseo-admin-report-table th {
	background: #075c5d;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	padding: 10px 12px;
	text-align: left;
	border-top: none !important;
}

.asseo-admin-report-table th:first-child {
	border-radius: 8px 0 0 8px;
}

.asseo-admin-report-table th:last-child {
	border-radius: 0 8px 8px 0;
}

.asseo-admin-report-table td {
	padding: 10px 12px;
	border-top: none !important;
	border-bottom: 1px solid #e0f5f5;
	color: var(--asseo-primary);
	font-size: 13px;
	vertical-align: middle;
}

.asseo-admin-report-table tbody tr:last-child td {
	border-bottom: none;
}

/* Filas alternas (2026-08-14, pedido explicito) — el tema Hello
   Elementor ya aplica un zebra-striping propio y casi invisible
   ("table tbody>tr:nth-child(odd)>td{background-color:hsla(0,0%,50%,.071)}",
   ver reset.css del tema) a CUALQUIER tabla del sitio, esta incluida.
   ":not(.asseo-admin-report-table__totales)" es a proposito: la fila de
   totales tiene su PROPIO fondo mas abajo y no debe alternar con el
   resto (si cayera en una fila "par" por casualidad, se veria pisada
   por esta regla sin el ":not()"). */
.asseo-admin-report-table tbody tr:nth-child(even):not(.asseo-admin-report-table__totales) td {
	background: #f5fafa !important;
}

.asseo-admin-report-table tbody tr:nth-child(odd) td {
	background: #fff !important;
}

/* Fila "Total" (item 3, 2026-08-14, pedido explicito) — fondo + borde
   superior propios, para que se distinga claramente de las demas filas
   sin importar si le tocaba una fila par o impar. */
.asseo-admin-report-table__totales td {
	font-weight: 800;
	background: #e8f5f5 !important;
	/* "!important" aca tambien (2026-08-14): ".asseo-admin-report-table
	   td" de base ahora fuerza "border-top:none !important" (para tapar
	   el border-top del tema en el resto de filas) — sin este
	   "!important" esa regla mas generica ganaria por importancia sobre
	   esta mas especifica, y la fila de totales se quedaria sin su borde
	   superior real. */
	border-top: 2px solid #b1dacf !important;
	/* Sin borde inferior (2026-08-14, corregido el mismo dia, con
	   captura) — "!important" de mas: table td/th del tema Hello
	   Elementor trae "border:1px solid hsla(0,0%,50%,.502)" en las 4
	   caras (ver nota de zebra-striping mas arriba, mismo archivo), y
	   esta fila es la unica de la tabla que no tenia ya un
	   "border-bottom" propio ganandole (la regla generica
	   ".asseo-admin-report-table tbody tr:last-child td" de arriba SI le
	   gana en especificidad, pero sin "!important" cualquier empate de
	   origen queda a merced del orden de carga real de las hojas de
	   estilo — mas vale no depender de eso aca). */
	border-bottom: none !important;
}

/* Radio inferior de la fila "Total" (2026-08-14, pedido explicito) —
   SOLO en la 1ra/ultima celda (mismo patron ya usado arriba para
   ".asseo-admin-report-table th:first-child/:last-child"): aplicar el
   radio a TODAS las celdas de la fila dejaria huecos cuadrados en las
   columnas del medio (cada <td> redondeando su propia esquina inferior
   por separado, sin nada de fondo detras que los una).
   ".asseo-admin-report-table" ya tiene "border-radius" solo en el <th>
   de arriba, nunca abajo — este es el primer lugar donde la tabla
   necesita cerrar visualmente el radio del contenedor blanco. */
.asseo-admin-report-table__totales td:first-child {
	border-radius: 0 0 0 8px;
}

.asseo-admin-report-table__totales td:last-child {
	border-radius: 0 0 8px 0;
}

/*
 * Pulido visual de Reportes (2026-08-14, /ui-ux-pro-max, "mas
 * profesional, respetando colores") — sin cambiar la paleta ya
 * establecida (teal #075c5d de encabezado, mint #b1dacf/#e0f5f5 de
 * bordes, #e8f5f5 de la fila de totales), 3 ajustes:
 *
 * 1. Columnas numericas ("Cantidad"/"Total recaudado" en la tabla 1,
 *    "Servicios realizados"/"Ingresos" en la tabla 2 — siempre columna
 *    2 y 3 en ambas) alineadas a la derecha, no a la izquierda como el
 *    texto. Alinear numeros a la izquierda dificulta comparar
 *    magnitudes de un vistazo (un patron de UI de datos ya cubierto por
 *    la skill: numeros tabulares/alineados). Se targetea por posicion
 *    (nth-child), no por una clase nueva en cada <td> — ambas tablas
 *    comparten la misma forma (1 columna de texto + 2 numericas), asi
 *    que un selector generico alcanza sin tocar el PHP.
 * 2. "font-variant-numeric: tabular-nums" en esas mismas columnas —
 *    todos los digitos ocupan el mismo ancho, evita que una fila con
 *    "5" quede desalineada de otra con "13" solo por el kerning propio
 *    de cada digito en una fuente proporcional (Poppins).
 * 3. Hover sutil por fila (no aplica a la fila de Totales, que ya tiene
 *    su propio fondo fijo) — ayuda a seguir una fila con la vista en
 *    una tabla de 3 columnas anchas, mismo criterio que "state-clarity"
 *    de la skill (estados de interaccion deben notarse, aunque la fila
 *    en si no sea clickeable).
 */
.asseo-admin-report-table th:nth-child(2),
.asseo-admin-report-table th:nth-child(3),
.asseo-admin-report-table td:nth-child(2),
.asseo-admin-report-table td:nth-child(3) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.asseo-admin-report-table tbody tr:not(.asseo-admin-report-table__totales):hover td {
	background: #eef8f7 !important;
}

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

	/*
	 * "Ajustame la informacion a la pantalla" (2026-08-22, reportado con
	 * captura): las 2 tablas de Reportes tienen "min-width:400px" (a
	 * proposito, para que ninguna columna quede demasiado angosta) y
	 * dependian de ".asseo-admin-report-card__scroll{overflow-x:auto}"
	 * para verse completas en movil via scroll horizontal — en la
	 * practica, sin ninguna pista visual de que hay mas contenido hacia
	 * la derecha (scrollbar nativo casi invisible en la mayoria de
	 * moviles), la ultima columna ("Total recaudado"/"Ingresos") quedaba
	 * cortada a la vista sin que el staff supiera que podia deslizar
	 * para verla. Se reemplaza la tabla por un listado de tarjetas
	 * apiladas (mismo patron ya usado en "Servicios y tarifas"/
	 * "Auxiliares de limpieza" en este breakpoint: cada fila se
	 * convierte en un bloque propio con sus datos en pares
	 * etiqueta:valor) — sin scroll horizontal, todo el contenido cabe en
	 * el ancho real de la pantalla.
	 */
	.asseo-admin-report-card__scroll {
		overflow-x: visible;
	}

	.asseo-admin-report-table {
		min-width: 0;
	}

	.asseo-admin-report-table thead {
		display: none;
	}

	.asseo-admin-report-table,
	.asseo-admin-report-table tbody,
	.asseo-admin-report-table tr {
		display: block;
		width: 100%;
	}

	.asseo-admin-report-table tbody tr {
		margin-bottom: 10px;
		border: 1px solid #e0f5f5;
		border-radius: 10px;
		overflow: hidden;
	}

	.asseo-admin-report-table tbody tr:last-child {
		margin-bottom: 0;
	}

	/* Cada <td> pasa de celda a fila propia ("etiqueta: valor") — la
	   etiqueta sale del "data-label" que ya trae cada <td> (agregado
	   junto con este cambio, uno por columna real de cada tabla), sin
	   duplicar el texto del encabezado en ningun otro lugar del markup. */
	.asseo-admin-report-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		text-align: right;
		border-bottom: 1px solid #e0f5f5 !important;
	}

	.asseo-admin-report-table tbody tr:last-child td:last-child {
		border-bottom: none !important;
	}

	.asseo-admin-report-table td::before {
		content: attr(data-label);
		flex: none;
		text-align: left;
		font-weight: 700;
		font-size: 11.5px;
		color: var(--asseo-text-secondary);
	}

	/* Cada fila (incluida "Total") ya tiene su propio radio completo por
	   la regla generica de arriba (".asseo-admin-report-table tbody tr")
	   — el radio parcial que las celdas de "Total" tienen en escritorio
	   (solo esquina inferior, para fundirse con la fila de arriba dentro
	   de la MISMA tabla) ya no aplica aca (cada <td> es su propio bloque
	   suelto, no una celda vecina a otra); se resetea para que no quede
	   un radio pequeño y descolgado dentro de la tarjeta.
	*/
	.asseo-admin-report-table__totales td:first-child,
	.asseo-admin-report-table__totales td:last-child {
		border-radius: 0;
	}
}