/**
 * Componente: Opening Status (Estilos Avanzados Anti-Colapso)
 * Ubicación: components/opening-status/opening-status.css
 *
 * @package UnionnFoodFlow
 */

.uff-opening-status {
	width: 100% !important;
	background: var(--uff-color-white, #ffffff) !important;
	border: 1px solid var(--uff-color-border, rgba(37,62,102,.08)) !important;
	border-radius: var(--uff-card-radius, var(--uff-radius-lg, 18px)) !important;
	padding: var(--uff-card-padding, var(--uff-space-5, 20px)) !important;
	box-shadow: var(--uff-card-shadow, var(--uff-shadow-md)) !important;
	box-sizing: border-box !important;
	font-family: var(--uff-font-body, sans-serif) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
}

/* Fila de Estado Superior */
.uff-opening-status__current {
	display: flex !important;
	align-items: center !important;
	flex-direction: row !important;
	gap: var(--uff-space-3, 12px) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Punto de Luz de Apertura */
.uff-opening-status__indicator {
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background-color: var(--uff-color-success, #56b870) !important;
	box-shadow: 0 0 0 4px var(--uff-color-success-bg, #ecfdf5) !important;
	flex: 0 0 10px !important; /* Evita que el punto cambie de tamaño */
}

.uff-opening-status--closed .uff-opening-status__indicator {
	background-color: var(--uff-color-danger, #d9534f) !important;
	box-shadow: 0 0 0 4px var(--uff-color-danger-bg, #fef2f2) !important;
}

/* Contenedor de Textos: Blindaje Total contra Aplastamientos */
.uff-opening-status__info {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important; /* CLAVE: Impide que el texto se rompa letra a letra */
	box-sizing: border-box !important;
}

.uff-opening-status__title {
	margin: 0 !important;
	font-family: var(--uff-font-body, sans-serif) !important;
	font-size: var(--uff-text-sm, 14px) !important;
	font-weight: var(--uff-font-bold, 700) !important;
	line-height: 1.2 !important;
	color: var(--uff-color-text, #253e66) !important;
	white-space: nowrap !important;
}

.uff-opening-status__meta {
	margin: 0 !important;
	font-size: var(--uff-text-xs, 12px) !important;
	color: var(--uff-color-text-light, #666666) !important;
	line-height: 1.3 !important;
}

/* Botón Desplegable Píldora de Alta Gama */
.uff-opening-status__toggle-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: var(--uff-color-secondary, #f7f7f7) !important;
	border: 1px solid var(--uff-color-border, rgba(37,62,102,.08)) !important;
	border-radius: var(--uff-radius-md, 12px) !important;
	padding: var(--uff-space-2, 8px) var(--uff-space-4, 16px) !important;
	margin: var(--uff-space-4, 16px) 0 0 0 !important;
	box-shadow: none !important;
	outline: none !important;
	
	font-family: inherit !important;
	font-size: var(--uff-text-xs, 12px) !important;
	font-weight: var(--uff-font-semibold, 600) !important;
	color: var(--uff-color-text, #253e66) !important;
	
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--uff-space-2, 8px) !important;
	cursor: pointer !important;
	transition: background-color .2s ease, border-color .2s ease !important;
}

.uff-opening-status__toggle-btn:hover {
	background-color: var(--uff-color-border, rgba(37,62,102,.08)) !important;
}

.uff-opening-status__toggle-icon {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	line-height: 1 !important;
	transition: transform .2s ease !important;
}

/* Rotación de flecha en estado abierto */
.uff-opening-status.is-open .uff-opening-status__toggle-icon {
	transform: rotate(180deg) !important;
}

/* Bloque Oculto del Calendario Semanal */
.uff-opening-status__week-list {
	display: none; /* Se activa mediante JavaScript */
	width: 100% !important;
	margin-top: var(--uff-space-3, 12px) !important;
	padding-top: var(--uff-space-3, 12px) !important;
	border-top: 1px dashed var(--uff-color-border, rgba(37,62,102,.08)) !important;
	flex-direction: column !important;
	gap: var(--uff-space-2, 8px) !important;
	box-sizing: border-box !important;
}

.uff-opening-status.is-open .uff-opening-status__week-list {
	display: flex !important;
	animation: uffSlideDownSchedule .25s ease-out forwards;
}

.uff-opening-status__week-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	font-size: var(--uff-text-xs, 12px) !important;
	line-height: 1.2 !important;
}

.uff-opening-status__day-label {
	font-weight: var(--uff-font-medium, 500) !important;
	color: var(--uff-color-text-light, #666666) !important;
}

.uff-opening-status__hours-value {
	font-weight: var(--uff-font-semibold, 600) !important;
	color: var(--uff-color-text, #253e66) !important;
}

@keyframes uffSlideDownSchedule {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}
.uff-opening-status__tabs{width:100%!important;margin:0 0 10px!important}.uff-opening-status__tabs .uff-tabs__trigger{flex:1!important;font-size:12px!important}.uff-opening-status__week-list{width:100%;max-width:520px}.uff-opening-status__week-row{display:flex;justify-content:space-between;gap:16px}.uff-opening-status__hours-value{text-align:right}.uff-opening-status.is-open{grid-column:1/-1}.uff-opening-status.is-open .uff-opening-status__week-list{margin-top:12px}