/**
 * Polarix Rate Suite — conversor flotante de moneda (página de producto).
 * Formas: rounded (default) | circle | vertical. Tema light/dark/system por
 * data-prs-theme. En mobile se ancla al borde derecho. Offset con --prs-oy.
 */

.prs-conv {
	position: fixed;
	z-index: 9990;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	--sz: var(--prs-size-d, 60px);

	/* Tema claro (default) */
	--c-fab-bg: #ffffff; --c-fab-bd: rgba(38,161,123,.28); --c-fab-ic: #1e293b;
	--c-panel-bg: rgba(255,255,255,.88); --c-panel-bd: rgba(15,23,42,.08); --c-text: #0f172a; --c-title: #0f172a;
	--c-prod-bg: rgba(38,161,123,.08); --c-prod-bd: rgba(38,161,123,.18); --c-usdt: #334155;
	--c-label: #64748b; --c-row-bg: #ffffff; --c-row-bd: rgba(15,23,42,.1); --c-input: #0f172a; --c-input-ro: #475569;
	--c-locked: #f8fafc; --c-out-bg: #0f172a; --c-note: #94a3b8; --c-close: #64748b; --c-close-h: rgba(15,23,42,.07);
	--c-shadow: 0 28px 70px -22px rgba(15,23,42,.5);
}

/* Tema oscuro explícito */
.prs-conv[data-prs-theme="dark"] {
	--c-fab-bg: #1b2230; --c-fab-bd: rgba(52,211,153,.35); --c-fab-ic: #e8edf5;
	--c-panel-bg: rgba(20,26,38,.92); --c-panel-bd: rgba(255,255,255,.1); --c-text: #e8edf5; --c-title: #f1f5f9;
	--c-prod-bg: rgba(52,211,153,.13); --c-prod-bd: rgba(52,211,153,.28); --c-usdt: #cbd5e1;
	--c-label: #94a3b8; --c-row-bg: #0f1622; --c-row-bd: rgba(255,255,255,.12); --c-input: #f1f5f9; --c-input-ro: #94a3b8;
	--c-locked: #0b111b; --c-out-bg: #05080d; --c-note: #64748b; --c-close: #94a3b8; --c-close-h: rgba(255,255,255,.1);
	--c-shadow: 0 28px 70px -22px rgba(0,0,0,.75);
}
/* Sistema -> oscuro si el SO está en oscuro */
@media (prefers-color-scheme: dark) {
	.prs-conv[data-prs-theme="system"] {
		--c-fab-bg: #1b2230; --c-fab-bd: rgba(52,211,153,.35); --c-fab-ic: #e8edf5;
		--c-panel-bg: rgba(20,26,38,.92); --c-panel-bd: rgba(255,255,255,.1); --c-text: #e8edf5; --c-title: #f1f5f9;
		--c-prod-bg: rgba(52,211,153,.13); --c-prod-bd: rgba(52,211,153,.28); --c-usdt: #cbd5e1;
		--c-label: #94a3b8; --c-row-bg: #0f1622; --c-row-bd: rgba(255,255,255,.12); --c-input: #f1f5f9; --c-input-ro: #94a3b8;
		--c-locked: #0b111b; --c-out-bg: #05080d; --c-note: #64748b; --c-close: #94a3b8; --c-close-h: rgba(255,255,255,.1);
		--c-shadow: 0 28px 70px -22px rgba(0,0,0,.75);
	}
}

/* ---------- Posición (desktop) ---------- */
.prs-conv--bottom-left  { left: 24px;  bottom: 24px; }
.prs-conv--bottom-right { right: 24px; bottom: 24px; }
.prs-conv--middle-left  { left: 24px;  top: 50%; transform: translateY(calc(-50% + var(--prs-oy, 0px))); }
.prs-conv--middle-right { right: 24px; top: 50%; transform: translateY(calc(-50% + var(--prs-oy, 0px))); }
.prs-conv--shape-rounded.prs-conv--side-left,
.prs-conv--shape-vertical.prs-conv--side-left  { left: 0; }
.prs-conv--shape-rounded.prs-conv--side-right,
.prs-conv--shape-vertical.prs-conv--side-right { right: 0; }

/* ---------- FAB ---------- */
.prs-conv__fab {
	all: unset; box-sizing: border-box; position: relative; cursor: pointer;
	display: grid !important; place-items: center;
	background: var(--c-fab-bg); color: var(--c-fab-ic);
	border: 1px solid var(--c-fab-bd);
	box-shadow: 0 12px 28px -8px rgba(15,23,42,.38), 0 2px 6px rgba(15,23,42,.12);
	transition: transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease;
}
.prs-conv__fab:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(15,23,42,.45); }
.prs-conv--middle-left .prs-conv__fab:hover, .prs-conv--middle-right .prs-conv__fab:hover { transform: none; }
.prs-conv__fab:focus-visible { outline: 3px solid rgba(38,161,123,.45); outline-offset: 2px; }
.prs-conv__icon { width: calc(var(--sz) * 0.45); height: calc(var(--sz) * 0.45); display: block; }
.prs-conv--shape-circle   .prs-conv__fab { width: var(--sz); height: var(--sz); border-radius: 50%; }
.prs-conv--shape-rounded  .prs-conv__fab { width: calc(var(--sz) * 0.82); height: var(--sz); border-radius: calc(var(--sz) * 0.27); }
.prs-conv--shape-vertical .prs-conv__fab { width: calc(var(--sz) * 0.74); height: calc(var(--sz) * 1.5); border-radius: calc(var(--sz) * 0.27); }
.prs-conv--shape-rounded.prs-conv--side-left  .prs-conv__fab,
.prs-conv--shape-vertical.prs-conv--side-left .prs-conv__fab { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.prs-conv--shape-rounded.prs-conv--side-right  .prs-conv__fab,
.prs-conv--shape-vertical.prs-conv--side-right .prs-conv__fab { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---------- Panel ---------- */
.prs-conv__panel {
	position: absolute; width: 320px; max-width: calc(100vw - 32px); padding: 18px; border-radius: 20px;
	background: var(--c-panel-bg); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid var(--c-panel-bd); box-shadow: var(--c-shadow); color: var(--c-text);
	opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.prs-conv--side-left  .prs-conv__panel { left: calc(100% + 12px); transform-origin: left center; }
.prs-conv--side-right .prs-conv__panel { right: calc(100% + 12px); transform-origin: right center; }
.prs-conv--middle-left  .prs-conv__panel,
.prs-conv--middle-right .prs-conv__panel { top: 50%; transform: translateY(-50%) scale(.97); }
.prs-conv--bottom-left  .prs-conv__panel,
.prs-conv--bottom-right .prs-conv__panel { bottom: 0; transform: translateY(8px) scale(.97); }
.prs-conv.is-open .prs-conv__panel { opacity: 1; pointer-events: auto; }
.prs-conv--middle-left.is-open  .prs-conv__panel,
.prs-conv--middle-right.is-open .prs-conv__panel { transform: translateY(-50%) scale(1); }
.prs-conv--bottom-left.is-open  .prs-conv__panel,
.prs-conv--bottom-right.is-open .prs-conv__panel { transform: translateY(0) scale(1); }

/* ---------- Header ---------- */
.prs-conv__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.prs-conv__title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--c-title); }
.prs-conv__close { all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50% !important; color: var(--c-close); font-size: 20px; line-height: 1; transition: background .15s ease, color .15s ease; }
.prs-conv__close:hover { background: var(--c-close-h); color: var(--c-text); }

/* ---------- Cuerpo ---------- */
.prs-conv__product { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 15px; border-radius: 15px; background: var(--c-prod-bg); border: 1px solid var(--c-prod-bd); margin-bottom: 15px; }
.prs-conv__usdt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--c-usdt); }
.prs-conv__usdt img { width: 18px; height: 18px; border-radius: 50%; }
.prs-conv__usdt strong { color: var(--c-text); }
.prs-conv__arrow { color: #26a17b; font-size: 13px; line-height: 1; }
.prs-conv__ars { font-size: 23px; font-weight: 800; color: var(--c-text); letter-spacing: -.01em; }
.prs-conv__calc { margin-bottom: 12px; }
.prs-conv__calc-label { display: block; font-size: 11px; font-weight: 600; color: var(--c-label); margin-bottom: 7px; }
.prs-conv__row { display: flex; align-items: center; gap: 8px; background: var(--c-row-bg); border: 1px solid var(--c-row-bd); border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; transition: border-color .15s ease, box-shadow .15s ease; }
.prs-conv__row:focus-within { border-color: #26a17b; box-shadow: 0 0 0 3px rgba(38,161,123,.14); }
.prs-conv--locked .prs-conv__row { background: var(--c-locked); }
.prs-conv__pre { font-size: 12px; font-weight: 700; color: #26a17b; }
.prs-conv__row input { all: unset; flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--c-input); font-family: inherit; }
.prs-conv__row input[readonly] { color: var(--c-input-ro); cursor: default; }
.prs-conv__lock { color: var(--c-label); display: inline-flex; }
.prs-conv__out { display: flex; align-items: baseline; gap: 5px; padding: 10px 13px; border-radius: 12px; background: var(--c-out-bg); color: #fff; }
.prs-conv__out-cur { font-size: 13px; opacity: .7; }
.prs-conv__out [data-prs="out"] { font-size: 18px; font-weight: 700; flex: 1; }
.prs-conv__out-ars { font-size: 11px; font-weight: 600; opacity: .6; }
.prs-conv__note { font-size: 10.5px; color: var(--c-note); margin: 0; text-align: center; line-height: 1.4; }

/* ---------- Mobile: borde derecho ---------- */
@media (max-width: 768px) {
	.prs-conv { left: auto !important; right: 0 !important; top: 50% !important; bottom: auto !important; transform: translateY(calc(-50% + var(--prs-oy, 0px))) !important; --sz: var(--prs-size-m, 56px); }
	.prs-conv--shape-circle { right: 8px !important; }
	.prs-conv--shape-rounded .prs-conv__fab, .prs-conv--shape-vertical .prs-conv__fab { border-radius: calc(var(--sz) * 0.27); border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
	.prs-conv__panel { left: auto !important; right: calc(100% + 12px) !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) scale(.97) !important; transform-origin: right center !important; width: 290px; }
	.prs-conv.is-open .prs-conv__panel { transform: translateY(-50%) scale(1) !important; }
}

@media (prefers-reduced-motion: reduce) { .prs-conv__fab, .prs-conv__panel { transition: none; } }