/* ==========================================================================
   theme-select.css — Estilo global reutilizable para <select.form-select>
   --------------------------------------------------------------------------
   Origen: estilos Minimal Clean UI de theme-contrato.css
   Entrada global: html/head.php

   Alcance:
   - Aplica a select.form-select nativos del proyecto.
   - NO aplica a Select2 ni selects con clase opt-out .sg-select-plain.
   - NO aplica a select[multiple] (apariencia distinta).

   Opt-out: agregar class="sg-select-plain" al <select> si necesita el estilo
   nativo/Bootstrap sin este tema.
   ========================================================================== */

:root {
	--select-primary: #716ff9;
	--select-primary-soft: rgba(113, 111, 249, 0.10);
	--select-text: #1f2937;
	--select-muted: #64748b;
	--select-border: rgba(100, 116, 139, 0.20);
	--select-border-hover: rgba(100, 116, 139, 0.34);
	--select-bg: rgba(255, 255, 255, 0.96);
	--select-radius: 11px;
	--select-height: 44px;
}

/* ==========================================================================
   SELECT BASE
   ========================================================================== */
select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) {
	width: 100%;
	min-height: var(--select-height);
	height: var(--select-height);
	padding: 0.65rem 2.7rem 0.65rem 0.9rem;
	border: 1px solid var(--select-border) !important;
	border-radius: var(--select-radius) !important;
	background-color: var(--select-bg);
	color: var(--select-text);
	font-size: 0.9rem;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: none !important;
	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	/* Chevron minimalista (derecha) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 14px;
}

/* ==========================================================================
   HOVER
   ========================================================================== */
select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain):hover {
	border-color: var(--select-border-hover) !important;
	color: #080808;
	background-color: rgb(228 226 229 / 57%);
}

/* ==========================================================================
   FOCUS
   ========================================================================== */
select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain):focus {
	border-color: var(--select-primary) !important;
	background-color: #fff;
	outline: none;
	box-shadow: 0 0 0 3px var(--select-primary-soft) !important;
	transform: translateY(0);
}

/* ==========================================================================
   OPEN — navegadores que soportan :open
   ========================================================================== */
select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain):open {
	border-color: var(--select-primary) !important;
	box-shadow: 0 0 0 3px var(--select-primary-soft) !important;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23716ff9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   OPTIONS
   ========================================================================== */
select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) option {
	color: #1f2937;
	background: #fff;
	font-size: 0.9rem;
	/*font-weight: 500;*/
	padding: 0.65rem 0.8rem;
}

select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) option:checked {
	background-color: #f0efff;
	color: #4f46e5;
	/*font-weight: 600;*/
}

select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) option[value=""] {
	color: #94a3b8;
}

/* ==========================================================================
   DISABLED
   ========================================================================== */
select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain):disabled {
	opacity: 0.65;
	background-color: #f8fafc;
	color: #40454b;/*#94a3b8;*/
	border-color: rgba(148, 163, 184, 0.16) !important;
	cursor: not-allowed;
	transform: none;
}

/* ==========================================================================
   SELECT DENTRO DE INPUT-GROUP
   ========================================================================== */
.input-group > select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) {
	min-height: 42px;
	height: 42px;
	border-radius: 10px !important;
	border: none !important;
	background-color: #f8fafc;
	padding-left: 0.85rem;
	padding-right: 2.25rem;
}

/* ==========================================================================
   SELECT MODERNO — NAVEGADORES CON base-select
   ========================================================================== */
@supports (appearance: base-select) {
	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) {
		appearance: base-select;
	}

	/* Oculta picker-icon nativo (triángulo); se mantiene el chevron del background-image */
	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain)::picker-icon {
		display: none;
	}

	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain)::picker(select) {
		appearance: base-select;
		margin-top: 0.4rem;
		padding: 0.4rem;
		border: 1px solid rgba(100, 116, 139, 0.14);
		border-radius: 13px;
		background: rgba(255, 255, 255, 0.98);
		box-shadow:
			0 18px 50px rgba(15, 23, 42, 0.12),
			0 4px 14px rgba(15, 23, 42, 0.06);
		max-height: min(280px, 50vh);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
	}

	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain)::picker(select)::-webkit-scrollbar {
		width: 6px;
	}

	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain)::picker(select)::-webkit-scrollbar-track {
		background: transparent;
		margin: 6px 0;
	}

	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain)::picker(select)::-webkit-scrollbar-thumb {
		background: rgba(100, 116, 139, 0.32);
		border-radius: 999px;
	}

	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain)::picker(select)::-webkit-scrollbar-thumb:hover {
		background: rgba(100, 116, 139, 0.5);
	}

	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) option {
		display: flex;
		align-items: center;
		min-height: 38px;
		padding: 0.6rem 0.75rem;
		border-radius: 8px;
		border: none;
		background: transparent;
		color: #334155;
		transition:
			background-color 140ms ease,
			color 140ms ease;
	}

	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) option:hover,
	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) option:focus {
		background: #8992a212; /*#f5f5f5;*/
		color: #000;/*#4f46e5;*/
		font-weight:500;
	}

	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) option:checked {
		background: #e4e2e591; /*#eeecff;*/
		color: #080808; /*#5b55d6;*/
		font-weight: 500;
	}
}

/* ==========================================================================
   ANIMACIÓN
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) {
		transition:
			border-color 180ms ease,
			background-color 180ms ease,
			box-shadow 180ms ease,
			transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
	select.form-select:not([multiple]):not([class*="select2"]):not(.sg-select-plain) {
		min-height: 43px;
		height: 43px;
		font-size: 0.875rem;
	}
}