/**
 * SB Contact Center Float – Frontend CSS
 *
 * Variables de color inyectadas por PHP (class-sbccf-frontend.php):
 * --sbccf-primary   → color del encabezado y botón flotante
 * --sbccf-secondary → fondo del cuerpo del popup
 * --sbccf-buttons   → fondo de los botones de canal
 * --sbccf-btn-text  → texto/iconos de los botones de canal
 *
 * Metodología: prefijo sbccf- en todos los selectores para evitar colisiones.
 * Responsive: mobile-first con media query para escritorio.
 */

/* ============================================================================
   VARIABLES FALLBACK
   (sobrescritas por el inline style inyectado desde PHP)
   ============================================================================ */
:root {
	--sbccf-primary:   #1e4fa0;
	--sbccf-secondary: #f5f7fa;
	--sbccf-buttons:   #1e4fa0;
	--sbccf-btn-text:  #ffffff;

	/* Colores fijos del sistema */
	--sbccf-white:        #ffffff;
	--sbccf-text-dark:    #2c3e50;
	--sbccf-text-muted:   #6b7280;
	--sbccf-border:       #e5e7eb;
	--sbccf-disabled-bg:  #e9ecef;
	--sbccf-disabled-txt: #9ca3af;
	--sbccf-shadow:       0 8px 32px rgba(0, 0, 0, 0.15);
	--sbccf-shadow-btn:   0 4px 12px rgba(0, 0, 0, 0.20);
	--sbccf-radius:       16px;
	--sbccf-radius-btn:   10px;
	--sbccf-z:            99999;

	/* Posición del widget */
	--sbccf-bottom:  24px;
	--sbccf-side:    24px;
}

/* ============================================================================
   CONTENEDOR PRINCIPAL DEL WIDGET
   ============================================================================ */
.sbccf-widget {
	position:   fixed;
	bottom:     var(--sbccf-bottom);
	z-index:    var(--sbccf-z);
	display:    flex;
	flex-direction: column;
	align-items: flex-end;
	gap:        12px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size:  15px;
	line-height: 1.4;
	box-sizing: border-box;
}

.sbccf-widget *,
.sbccf-widget *::before,
.sbccf-widget *::after {
	box-sizing: inherit;
}

/* Posición derecha (por defecto) */
.sbccf-widget.sbccf-pos-right {
	right:      var(--sbccf-side);
	align-items: flex-end;
}

/* Posición izquierda */
.sbccf-widget.sbccf-pos-left {
	left:       var(--sbccf-side);
	right:      auto;
	align-items: flex-start;
}

/* ============================================================================
   BOTÓN FLOTANTE PRINCIPAL
   ============================================================================ */
.sbccf-toggle-btn {
	display:        flex;
	align-items:    center;
	justify-content: center;
	width:          58px;
	height:         58px;
	border-radius:  50%;
	border:         none;
	background:     var(--sbccf-primary);
	color:          var(--sbccf-white);
	cursor:         pointer;
	box-shadow:     var(--sbccf-shadow-btn);
	transition:     transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
	                box-shadow 0.25s ease,
	                background 0.2s ease;
	position:       relative;
	overflow:       visible; /* Necesario para que el anillo pulsante se vea fuera del botón */
	outline:        none;
	flex-shrink:    0;
	/* Clip del contenido interno (íconos) sin cortar el ::after */
	isolation:      isolate;
}

/* Anillo pulsante alrededor del botón flotante */
.sbccf-toggle-btn::after {
	content:        '';
	position:       absolute;
	inset:          -3px;
	border-radius:  50%;
	border:         2.5px solid var(--sbccf-primary);
	opacity:        0;
	animation:      sbccf-ring-pulse 2.4s ease-out infinite;
	pointer-events: none;
	z-index:        -1;
}

/* Detener el anillo cuando el popup está abierto */
.sbccf-toggle-btn--open::after {
	animation: none;
	opacity:   0;
}

@keyframes sbccf-ring-pulse {
	0%   { opacity: 0.55; transform: scale(1);    }
	80%  { opacity: 0;    transform: scale(1.55); }
	100% { opacity: 0;    transform: scale(1.55); }
}

.sbccf-toggle-btn:hover,
.sbccf-toggle-btn:focus-visible {
	transform:  scale(1.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.sbccf-toggle-btn:focus-visible {
	outline: 3px solid var(--sbccf-primary);
	outline-offset: 3px;
}

.sbccf-toggle-btn:active {
	transform: scale(0.96);
}

/* Íconos del botón flotante */
.sbccf-icon {
	position:   absolute;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.sbccf-icon-open {
	opacity:   1;
	transform: rotate(0deg) scale(1);
}

.sbccf-icon-close {
	opacity:   0;
	transform: rotate(-90deg) scale(0.7);
}

/* Estado: popup abierto → mostrar X */
.sbccf-toggle-btn--open .sbccf-icon-open {
	opacity:   0;
	transform: rotate(90deg) scale(0.7);
}

.sbccf-toggle-btn--open .sbccf-icon-close {
	opacity:   1;
	transform: rotate(0deg) scale(1);
}

/* ============================================================================
   POPUP
   ============================================================================ */
.sbccf-popup {
	width:         320px;
	background:    var(--sbccf-white);
	border-radius: var(--sbccf-radius);
	box-shadow:    var(--sbccf-shadow);
	overflow:      hidden;

	/* Animación de entrada */
	opacity:        0;
	transform:      translateY(12px) scale(0.97);
	transition:     opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
	pointer-events: none;
}

/* Estado visible */
.sbccf-popup--visible {
	opacity:        1;
	transform:      translateY(0) scale(1);
	pointer-events: auto;
}

/* Cuando está hidden: forzar que no sea interactivo */
.sbccf-popup[hidden] {
	display: block !important; /* override del hidden nativo para mantener animación */
	opacity:        0;
	transform:      translateY(12px) scale(0.97);
	pointer-events: none;
	visibility:     hidden;
}

.sbccf-popup--visible[hidden] {
	/* Estado de conflicto: no debería ocurrir */
	visibility: visible;
}

/* ============================================================================
   ENCABEZADO DEL POPUP
   ============================================================================ */
.sbccf-popup-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         16px 18px;
	background:      var(--sbccf-primary);
	color:           var(--sbccf-white);
	gap:             10px;
}

.sbccf-header-content {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex:        1;
	min-width:   0;
}

.sbccf-header-icon {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
	opacity:     0.9;
}

.sbccf-popup-title {
	margin:      0 !important;
	padding:     0 !important;
	font-size:   16px !important;
	font-weight: 700 !important;
	color:       var(--sbccf-white) !important;
	line-height: 1.3 !important;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

/* Botón cerrar X del encabezado */
.sbccf-popup-close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      transparent;
	border:          none;
	color:           rgba(255, 255, 255, 0.85);
	cursor:          pointer;
	padding:         4px;
	border-radius:   6px;
	transition:      background 0.15s ease, color 0.15s ease;
	flex-shrink:     0;
	outline:         none;
}

.sbccf-popup-close:hover,
.sbccf-popup-close:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	color:      var(--sbccf-white);
}

.sbccf-popup-close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

/* ============================================================================
   CUERPO DEL POPUP
   ============================================================================ */
.sbccf-popup-body {
	padding:    18px 18px 20px;
	background: var(--sbccf-secondary);
}

.sbccf-popup-desc {
	margin:      0 0 10px !important;
	font-size:   13.5px !important;
	color:       var(--sbccf-text-dark) !important;
	line-height: 1.5 !important;
}

.sbccf-popup-schedule {
	display:      flex;
	align-items:  flex-start;
	gap:          6px;
	margin:       0 0 16px !important;
	font-size:    12px !important;
	color:        var(--sbccf-text-muted) !important;
	line-height:  1.4 !important;
	background:   rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	padding:      8px 10px !important;
}

/* ============================================================================
   CANALES DE CONTACTO
   ============================================================================ */
.sbccf-channels {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

/* Botón base de canal
   Usamos !important en las propiedades de layout para anular estilos de
   botones del tema (algunos temas aplican text-align:center o justify-content:center
   a todos los <button>). Los tres canales son <button>, por lo que serán idénticos. */
.sbccf-channel-btn {
	display:          flex !important;
	align-items:      center !important;
	justify-content:  flex-start !important;
	gap:              10px;
	width:            100%;
	padding:          12px 40px 12px 14px; /* padding-right mayor para que el badge no solape el texto */
	background:       var(--sbccf-buttons);
	color:            var(--sbccf-btn-text) !important;
	border:           none;
	border-radius:    var(--sbccf-radius-btn);
	cursor:           pointer;
	font-size:        14px !important;
	font-weight:      600 !important;
	text-decoration:  none !important;
	text-align:       left !important;
	line-height:      1.3;
	transition:       background 0.18s ease,
	                  transform 0.15s ease,
	                  box-shadow 0.18s ease,
	                  opacity 0.18s ease;
	position:         relative;
	overflow:         hidden;
	outline:          none;
	font-family:      inherit;
	box-sizing:       border-box;
}

.sbccf-channel-btn:hover:not([disabled]):not(.sbccf-channel-btn--disabled),
.sbccf-channel-btn:focus-visible:not([disabled]):not(.sbccf-channel-btn--disabled) {
	filter:     brightness(1.12);
	transform:  translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.sbccf-channel-btn:active:not([disabled]):not(.sbccf-channel-btn--disabled) {
	transform: translateY(0);
	filter:    brightness(0.96);
}

.sbccf-channel-btn:focus-visible {
	outline: 3px solid var(--sbccf-primary);
	outline-offset: 2px;
}

/* Ícono del botón */
.sbccf-btn-icon {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
	opacity:     0.92;
}

/* Etiqueta del botón: siempre alineada a la izquierda, igual en los tres canales */
.sbccf-btn-label {
	flex:       1;
	text-align: left !important;
	min-width:  0;
	overflow:   hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

/* Tag de horario offline (visible solo cuando está deshabilitado) */
.sbccf-offline-tag {
	font-size:   10px;
	font-weight: 400;
	opacity:     0;
	white-space: nowrap;
	transition:  opacity 0.2s ease;
	flex-shrink: 0;
}

/* Disponibilidad 24/7 del Asesor IA — posición absoluta para no desplazar el texto */
.sbccf-online-badge {
	position:     absolute;
	right:        12px;
	top:          50%;
	transform:    translateY(-50%);
	font-size:    10px;
	font-weight:  700;
	background:   rgba(255, 255, 255, 0.22);
	border-radius: 20px;
	padding:      2px 7px;
	white-space:  nowrap;
	letter-spacing: 0.5px;
}

/* ============================================================================
   ESTADO DESHABILITADO (fuera de horario)
   ============================================================================ */
.sbccf-channel-btn--disabled,
.sbccf-channel-btn[disabled] {
	background: var(--sbccf-disabled-bg) !important;
	color:      var(--sbccf-disabled-txt) !important;
	cursor:     not-allowed !important;
	transform:  none !important;
	box-shadow: none !important;
	filter:     none !important;
	opacity:    0.85;
}

.sbccf-channel-btn--disabled .sbccf-offline-tag,
.sbccf-channel-btn[disabled] .sbccf-offline-tag {
	opacity: 1;
	color:   var(--sbccf-disabled-txt);
}

.sbccf-channel-btn--disabled .sbccf-btn-icon,
.sbccf-channel-btn[disabled] .sbccf-btn-icon {
	opacity: 0.5;
}

/* ============================================================================
   POPUP – POSICIÓN FLOTANTE (todas las pantallas)
   El popup siempre flota SOBRE el botón como tarjeta.
   En móvil NO se usa el enfoque de bottom-sheet para evitar tapar
   otros botones flotantes del tema (carrito, etc.).
   ============================================================================ */
.sbccf-popup {
	position:   absolute;
	bottom:     calc(100% + 12px);
	max-height: 80vh;
	overflow-y: auto;
}

/* Alineación horizontal según posición configurada */
.sbccf-pos-right .sbccf-popup {
	right: 0;
	left:  auto;
}

.sbccf-pos-left .sbccf-popup {
	left:  0;
	right: auto;
}

/* ============================================================================
   RESPONSIVE – MÓVIL (max 600px)
   El botón flotante sube para evitar colisión con el carrito u otros widgets.
   El popup mantiene su posición flotante sobre el botón, con ancho adaptado.
   ============================================================================ */
@media (max-width: 600px) {
	:root {
		--sbccf-bottom: 90px; /* Sube el widget sobre botones flotantes del tema */
		--sbccf-side:   16px;
	}

	.sbccf-toggle-btn {
		width:  54px;
		height: 54px;
	}

	.sbccf-popup {
		/* Ancho adaptado: ocupa el espacio disponible con margen lateral */
		width:     calc(100vw - 32px);
		max-width: 320px;
		max-height: calc(100svh - 180px);
	}
}

/* ============================================================================
   ACCESIBILIDAD: PREFERENCIA DE MOVIMIENTO REDUCIDO
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	.sbccf-popup,
	.sbccf-toggle-btn,
	.sbccf-channel-btn,
	.sbccf-icon {
		transition: none !important;
		animation:  none !important;
	}
}