/**
 * GO1 TRANSFER SUITE — Frontend Fixes / datepicker.css v1.2.3
 * ─────────────────────────────────────────────────────────────
 * FIX FLECHAS v4 — DEFINITIVO: SVG inline como background-image.
 * Ventajas vs intentos anteriores:
 *  - No depende de ningún carácter Unicode ni glifo de fuente
 *  - No depende del border-trick CSS (que tenía la geometría confusa)
 *  - Se renderiza idéntico en todos los browsers, OS y resoluciones
 *  - No puede ser sobreescrito por el sprite de jQuery UI
 */

#ui-datepicker-div {
	background: var(--go1-bg-2, #071428) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
	padding: 12px !important;
	width: 280px !important;
	font-family: var(--go1-font) !important;
}

/* ── Header ───────────────────────────────────────────────── */
#ui-datepicker-div .ui-datepicker-header {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 0 10px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	overflow: visible !important;
}

#ui-datepicker-div .ui-widget-header {
	background: transparent !important;
	border: none !important;
}

#ui-datepicker-div .ui-datepicker-title {
	flex: 1 !important;
	text-align: center !important;
	color: var(--go1-white) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: capitalize !important;
	order: 2 !important;
}

#ui-datepicker-div .ui-datepicker-prev { order: 1 !important; }
#ui-datepicker-div .ui-datepicker-next { order: 3 !important; }

/* ── BOTONES prev / next ─────────────────────────────────
   El JS (popup-fix.js) inyecta los SVGs directamente en el DOM.
   El CSS NO debe añadir ::before o ::after — causaría duplicados.
   ────────────────────────────────────────────────────────── */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	cursor: pointer !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background-image: none !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	position: static !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	text-indent: 0 !important;
}

/* FIX DEFINITIVO FLECHAS:
   Chauffeur aplica transform: scaleX(-1) al botón PREV para voltear
   su sprite de flecha →. Esto también voltea nuestro SVG ←.
   Nuestro !important + selector más específico gana sobre el suyo. */
#ui-datepicker-div .ui-datepicker-prev {
	transform: none !important;
	-webkit-transform: none !important;
}

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
	background-color: rgba(0, 196, 190, 0.2) !important;
	background-image: none !important;
}

/* Ocultar el span .ui-icon del sprite de jQuery UI */
#ui-datepicker-div .ui-datepicker-prev span.ui-icon,
#ui-datepicker-div .ui-datepicker-next span.ui-icon,
#ui-datepicker-div .ui-datepicker-prev span:not(.go1-dp-arrow),
#ui-datepicker-div .ui-datepicker-next span:not(.go1-dp-arrow) {
	display: none !important;
	visibility: hidden !important;
	background-image: none !important;
}

/* FLECHAS: CSS puro via ::after con SVG data URI
   - El JS NO inyecta nada (solo limpia los spans originales)
   - El PREV tiene transform:none (ver abajo), por eso el SVG ← es correcto
   - El NEXT no tiene transform, SVG → es correcto */

/* Resetear ::before completamente */
#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
	content: none !important;
	display: none !important;
}

/* ← flecha IZQUIERDA para PREV */
#ui-datepicker-div .ui-datepicker-prev::after {
	content: '' !important;
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 18L9 12L15 6' stroke='white' stroke-opacity='0.85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 18px 18px !important;
}

/* → flecha DERECHA para NEXT */
#ui-datepicker-div .ui-datepicker-next::after {
	content: '' !important;
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6L15 12L9 18' stroke='white' stroke-opacity='0.85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 18px 18px !important;
}

#ui-datepicker-div .ui-datepicker-prev:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 18L9 12L15 6' stroke='%2300C4BE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#ui-datepicker-div .ui-datepicker-next:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%2300C4BE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* El span .go1-dp-arrow del JS (oculto — CSS maneja las flechas) */
#ui-datepicker-div .go1-dp-arrow {
	display: none !important;
}

/* Disabled — visible pero atenuado */
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled {
	opacity: 0.35 !important;
	cursor: default !important;
	pointer-events: none !important;
	visibility: visible !important;
	display: flex !important;
}

/* ── Tabla calendario ─────────────────────────────────────── */
#ui-datepicker-div table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 0 !important;
}

#ui-datepicker-div th {
	color: rgba(255, 255, 255, 0.4) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	padding: 6px 0 !important;
	text-align: center !important;
	border: none !important;
	background: transparent !important;
}

#ui-datepicker-div td {
	padding: 2px !important;
	border: none !important;
	background: transparent !important;
	text-align: center !important;
}

#ui-datepicker-div td a,
#ui-datepicker-div td span {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 auto !important;
	border-radius: 50% !important;
	color: var(--go1-white) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	cursor: pointer !important;
	text-decoration: none !important;
}

#ui-datepicker-div .ui-state-default {
	background: transparent !important;
	background-image: none !important;
	border: none !important;
}

#ui-datepicker-div td a:hover,
#ui-datepicker-div .ui-state-hover {
	background: rgba(0, 196, 190, 0.15) !important;
	background-image: none !important;
	border: none !important;
	color: var(--go1-white) !important;
}

#ui-datepicker-div td .ui-state-active {
	background: var(--go1-teal) !important;
	background-image: none !important;
	color: #000 !important;
	font-weight: 700 !important;
}

#ui-datepicker-div td .ui-state-highlight {
	background: rgba(255, 255, 255, 0.1) !important;
	background-image: none !important;
	color: var(--go1-white) !important;
	border: 1px solid rgba(0, 196, 190, 0.4) !important;
}

#ui-datepicker-div td.ui-datepicker-unselectable span {
	color: rgba(255, 255, 255, 0.15) !important;
	cursor: default !important;
}

#ui-datepicker-div td.ui-datepicker-week-end a {
	color: rgba(255, 255, 255, 0.7) !important;
}