/* =============================================================================
   Fluyez Conversor — Estilos del widget
   Prefijo: .fconv-
   ============================================================================= */

/* Variables (fallback a sistema de diseño del tema si existe) */
.fconv-widget {
	--fconv-radius:    12px;
	--fconv-border:    #e2e8f0;
	--fconv-bg:        #ffffff;
	--fconv-bg-input:  #f8fafc;
	--fconv-text:      #1e293b;
	--fconv-text-muted:#64748b;
	--fconv-accent:    var( --fluyez-color-primary, #265ff1 );
	--fconv-accent-bg: #f0f7ff;
	--fconv-shadow:    0 2px 12px rgba( 0, 0, 0, 0.06 );
	--fconv-swap-size: 40px;
	--fconv-transition:0.18s ease;

	background:    var( --fconv-bg );
	border:        1px solid var( --fconv-border );
	border-radius: var( --fconv-radius );
	box-shadow:    var( --fconv-shadow );
	padding:       1.5rem;
	max-width:     480px;
	font-family:   inherit;
	color:         var( --fconv-text );
	position:      relative;
}

/* Estado de carga */
.fconv-widget--loading .fconv-result {
	opacity: 0.4;
}

/* -----------------------------------------------------------------------
   Cabecera
   ----------------------------------------------------------------------- */
.fconv-header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	gap:             0.5rem;
	margin-bottom:   1.25rem;
}

.fconv-label-pair {
	font-size:   1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.fconv-date {
	font-size: 0.72rem;
	color:     var( --fconv-text-muted );
	text-align: right;
}

/* -----------------------------------------------------------------------
   Calculadora
   ----------------------------------------------------------------------- */
.fconv-calc {
	display:     flex;
	align-items: flex-end;
	gap:         0.75rem;
}

/* Columnas izquierda / derecha */
.fconv-col {
	flex: 1;
	display:        flex;
	flex-direction: column;
	gap:            0.4rem;
}

.fconv-col__label {
	font-size:   0.78rem;
	font-weight: 600;
	color:       var( --fconv-text-muted );
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fconv-col__label-row {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
}

.fconv-col__label-row .fconv-col__label {
	flex-shrink: 0;
}

/* Inputs comunes */
.fconv-input {
	width:         100%;
	padding:       0.55rem 0.75rem;
	border:        1px solid var( --fconv-border );
	border-radius: calc( var( --fconv-radius ) - 2px ) !important;
	background:    var( --fconv-bg-input );
	font-size:     0.95rem;
	color:         var( --fconv-text );
	outline:       none;
	transition:    border-color var( --fconv-transition ), box-shadow var( --fconv-transition );
	box-sizing:    border-box;
}

.fconv-input:focus {
	border-color: var( --fconv-accent );
	box-shadow:   0 0 0 3px rgba( 38, 95, 241, 0.12 );
}

/* Selector fiat */
.fconv-fiat-select {
	flex: 0 0 auto;
	width: auto;
	cursor: pointer;
}

/* -----------------------------------------------------------------------
   Botón Swap
   ----------------------------------------------------------------------- */
.fconv-swap {
	flex-shrink:  0;
	width:        var( --fconv-swap-size );
	height:       var( --fconv-swap-size );
	border-radius: 50%;
	border:       1px solid var( --fconv-border );
	background:   var( --fconv-bg );
	color:        var( --fconv-accent );
	cursor:       pointer;
	display:      flex;
	align-items:  center;
	justify-content: center;
	transition:   background var( --fconv-transition ), transform var( --fconv-transition ), border-color var( --fconv-transition );
	padding:      0;
	margin-bottom: 2px; /* alineación óptica */
}

.fconv-swap:hover,
.fconv-swap:focus-visible {
	background:   var( --fconv-accent-bg );
	border-color: var( --fconv-accent );
	outline:      none;
}

.fconv-swap:active {
	transform: scale( 0.92 );
}

.fconv-swap--active {
	background:   var( --fconv-accent );
	border-color: var( --fconv-accent );
	color:        #fff;
}

.fconv-swap svg {
	pointer-events: none;
	display: block;
}

/* -----------------------------------------------------------------------
   Resultado
   ----------------------------------------------------------------------- */
.fconv-result-wrap {
	position:    relative;
	min-height:  2.6rem;
	display:     flex;
	align-items: center;
}

.fconv-result {
	display:     block;
	width:       100%;
	padding:     0.55rem 0.75rem;
	background:  var( --fconv-accent-bg );
	border:      1px solid transparent;
	border-radius: calc( var( --fconv-radius ) - 2px );
	font-size:   1.1rem;
	font-weight: 700;
	color:       var( --fconv-accent );
	letter-spacing: 0.01em;
	transition:  opacity var( --fconv-transition );
	word-break:  break-all;
}

/* -----------------------------------------------------------------------
   Spinner de carga
   ----------------------------------------------------------------------- */
.fconv-spinner {
	position: absolute;
	right:    0.6rem;
	top:      50%;
	transform: translateY( -50% );
	width:    16px;
	height:   16px;
	border:   2px solid var( --fconv-border );
	border-top-color: var( --fconv-accent );
	border-radius: 50%;
	animation: fconv-spin 0.6s linear infinite;
}

.fconv-spinner[hidden] {
	display: none;
}

@keyframes fconv-spin {
	to { transform: translateY( -50% ) rotate( 360deg ); }
}

/* -----------------------------------------------------------------------
   Precio unitario (pie)
   ----------------------------------------------------------------------- */
.fconv-unit-price {
	margin:    1rem 0 0;
	font-size: 0.8rem;
	color:     var( --fconv-text-muted );
	text-align: right;
	border-top: 1px solid var( --fconv-border );
	padding-top: 0.75rem;
}

.fconv-unit-price__value {
	color:       var( --fconv-text );
	font-weight: 600;
}

/* -----------------------------------------------------------------------
   Mensaje de error / aviso
   ----------------------------------------------------------------------- */
.fconv-notice,
.fconv-error {
	font-size: 0.85rem;
	padding:   0.6rem 0.9rem;
	border-radius: calc( var( --fconv-radius ) - 2px );
	margin:    0 0 0.75rem;
}

.fconv-notice {
	background: #fff8e1;
	color:      #92660a;
	border:     1px solid #f5d97a;
}

.fconv-error {
	background: #fff0f0;
	color:      #b91c1c;
	border:     1px solid #fecaca;
}

/* -----------------------------------------------------------------------
   Responsive: pantallas pequeñas
   ----------------------------------------------------------------------- */
@media ( max-width: 400px ) {
	.fconv-calc {
		flex-wrap: wrap;
	}
	.fconv-col {
		flex: 1 1 100%;
	}
	.fconv-swap {
		align-self: center;
		margin:     0 auto;
		transform:  rotate( 90deg );
	}
	.fconv-swap--active {
		transform: rotate( 270deg );
	}
}