/**
 * Dropdown "a la medida" para <select data-ciudad-select> (2026-08-20,
 * pedido explicito con captura — ver custom-select.js para el porque:
 * la lista abierta de un <select> nativo la dibuja el sistema
 * operativo, no esta pagina, asi que no habia forma confiable de
 * darle la marca de Asseo). Variables (--asseo-primary, --asseo-teal,
 * --asseo-mint, --asseo-text-secondary, --asseo-bg-light-2) ya viven en
 * ":root" de login.css, que este archivo declara como dependencia al
 * enqueuearse — no se redefinen aca.
 */

.asseo-custom-select {
	position: relative;
}

/*
 * Oculto SIN "display:none" a proposito (2026-08-20) — un campo
 * "display:none" queda "no renderizado", y algunos navegadores lo
 * saltan de la validacion nativa "required" en silencio. Este patron
 * (1x1px, opacity:0, overflow:hidden) lo mantiene "renderizado" para
 * que "required" siga funcionando exactamente igual que antes de este
 * cambio, solo que ahora invisible porque el boton de arriba es la
 * unica interfaz real.
 */
.asseo-custom-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.asseo-custom-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1.5px solid var(--asseo-mint);
	border-radius: 10px;
	background: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--asseo-primary);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.asseo-custom-select__trigger:hover {
	border-color: var(--asseo-teal);
}

.asseo-custom-select.is-abierto .asseo-custom-select__trigger,
.asseo-custom-select__trigger:focus-visible {
	outline: none;
	border-color: var(--asseo-teal);
	box-shadow: 0 0 0 3px rgba(43, 181, 175, 0.18);
}

.asseo-custom-select__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asseo-custom-select__label--placeholder {
	color: var(--asseo-text-secondary);
	font-weight: 500;
}

.asseo-custom-select__chevron {
	display: flex;
	flex: none;
	color: var(--asseo-teal);
	transition: transform 0.2s ease;
}

.asseo-custom-select.is-abierto .asseo-custom-select__chevron {
	transform: rotate(180deg);
}

.asseo-custom-select__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 60;
	max-height: 280px;
	overflow-y: auto;
	/* box-sizing (2026-08-25): --flotante fija un "width" en px a mano
	   (ver custom-select.js) igual al ancho real del boton — con
	   content-box (default) el padding+borde de aca abajo se sumarian
	   por fuera de ese ancho, dejando el panel ~14px mas ancho que el
	   boton. Con border-box coincide exacto, igual que ".asseo-custom-
	   select__trigger" (mismo criterio, ya usa border-box). */
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--asseo-mint);
	border-radius: 12px;
	box-shadow: 0 14px 32px rgba(7, 92, 93, 0.18);
	padding: 6px;
}

.asseo-custom-select__panel[hidden] {
	display: none;
}

/*
 * Mientras esta abierto, custom-select.js mueve el panel a
 * document.body con position:fixed y calcula left/top/width a mano
 * desde el boton (ver posicionarPanel() ahi) — asi escapa del
 * "overflow-y:auto" (y, en modales con "backdrop-filter" como
 * ".asseo-login", del "containing block" que eso tambien crea) de
 * cualquier modal de este plugin, que hoy recortaba el panel en
 * cualquier campo cercano al borde visible del scroll. "right:auto"
 * a proposito: la regla base de arriba fija "right:0" (para el caso
 * normal, panel todavia dentro de ".asseo-custom-select"); con
 * "left"+"width" ya puestos a mano por JS, un "right:0" heredado
 * sobreconstruye la caja.
 */
/*
 * "z-index" MUY alto a proposito (2026-08-25, bug real reportado con
 * captura: "Agregar propiedad" abria el panel pero no se veia nada).
 * Causa: al mover el panel a document.body queda como HERMANO del
 * overlay del modal, no ya adentro de el — su "z-index:60" de la
 * regla base de arriba ahora compite en el stacking context GLOBAL
 * contra el z-index del propio overlay del modal (".asseo-propiedad-
 * modal-overlay" usa 500; otros modales de este plugin llegan hasta
 * 1000), no ya solo contra sus vecinos dentro del modal — asi que
 * quedaba pintado DEBAJO de la tarjeta blanca del modal, invisible
 * aunque tecnicamente "abierto". Un numero fijo alto evita tener que
 * rastrear y superar el z-index mas alto de cada modal presente y
 * futuro del plugin.
 */
.asseo-custom-select__panel--flotante {
	position: fixed;
	right: auto;
	z-index: 999999;
}

.asseo-custom-select__group-label {
	padding: 10px 12px 4px;
	font-family: "Poppins", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--asseo-teal);
}

.asseo-custom-select__option {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--asseo-primary);
	cursor: pointer;
}

.asseo-custom-select__option:hover,
.asseo-custom-select__option.is-enfocada {
	background: var(--asseo-bg-light-2);
}

.asseo-custom-select__option--placeholder {
	color: var(--asseo-text-secondary);
}

.asseo-custom-select__option[aria-selected="true"] {
	background: var(--asseo-primary);
	color: #fff;
	font-weight: 700;
}

.asseo-custom-select__option--placeholder[aria-selected="true"] {
	background: var(--asseo-text-secondary);
}

/* Opcion presente pero no elegible (2026-08-20) — ej. una hora que no
   aplica al servicio elegido en el wizard de Reservas. Se ve, pero
   tachada/atenuada y sin cursor de "clickeable"; sin listener de click
   puesto (ver custom-select.js), asi que tocarla no hace nada. */
.asseo-custom-select__option--deshabilitada {
	color: var(--asseo-text-secondary);
	text-decoration: line-through;
	opacity: 0.55;
	cursor: not-allowed;
}

.asseo-custom-select__option--deshabilitada:hover {
	background: none;
}

/* Scrollbar del panel, discreta (2026-08-20) — solo navegadores basados
   en WebKit/Blink (Chrome/Safari/Android); en Firefox queda con su
   scrollbar por defecto, sin verse mal. */
.asseo-custom-select__panel::-webkit-scrollbar {
	width: 6px;
}

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