/** * DolarTrey — Estilos de precios y anti-flash * * Estrategia anti-flash: * 1. Script inline en añade .dtb-prices-loading al * 2. CSS pone los precios en opacity:0 mientras se cargan * 3. JS elimina la clase → fade-in 150ms */ /* ------------------------------------------------------------------------- Anti-flash: ocultar precios mientras carga el AJAX ------------------------------------------------------------------------- */ .dtb-prices-loading .dtb-price-wrap, html.dtb-prices-loading .dtb-price-wrap { opacity: 0; transition: none; } /* ------------------------------------------------------------------------- Bloque de precio DolarTrey ------------------------------------------------------------------------- */ .dtb-price-wrap { display: flex; flex-direction: column; gap: 2px; opacity: 1; transition: opacity 150ms ease-in; } /* Fila ~~$120.90~~ $100.00 — en línea */ .dtb-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } /* Precio inflado — tachado con , funciona en todos los temas */ del.dtb-price-inflated, .dtb-price-inflated { display: inline !important; font-size: 0.95em !important; font-weight: 400 !important; color: #999 !important; text-decoration: line-through !important; line-height: 1.4; } /* Precio real en USD — protagonista */ .dtb-price-usd { display: inline; font-size: 1.35em; font-weight: 700; color: #1B3A8F; line-height: 1.3; } /* Precio en bolívares */ .dtb-price-bs { display: block; font-size: 0.85em; color: #555; font-weight: 500; margin-top: 2px; } /* Badge de ahorro */ .dtb-discount-badge { display: inline-block; background-color: #CC1F36; color: #fff; font-size: 0.75em; font-weight: 600; padding: 2px 10px; border-radius: 3px; margin-top: 4px; line-height: 1.6; } /* Precio Bs. grande cuando es el único mostrado (modo bs_only) */ .dtb-price-bs--large { font-size: 1.6em !important; font-weight: 700 !important; color: #0D1B3E !important; margin-top: 0 !important; } /* ------------------------------------------------------------------------- Modos de vista: USD / Bs. (controlados por html.dtb-view-usd / dtb-view-bs) Solo actúan en modo 'toggle' — en otros modos el PHP ya controla qué renderiza ------------------------------------------------------------------------- */ /* Vista USD: ocultar bloque de bolívares y badge */ html.dtb-view-usd .dtb-price-bs { display: none !important; } html.dtb-view-usd .dtb-discount-badge { display: none !important; } /* Vista Bs.: ocultar bloque USD (inflado + real) y badge */ html.dtb-view-bs .dtb-price-row { display: none !important; } html.dtb-view-bs .dtb-price-bs { font-size: 1.5em !important; font-weight: 700 !important; color: #0D1B3E !important; margin-top: 0 !important; } /* ------------------------------------------------------------------------- Toggle widget de vista USD / Bs. ------------------------------------------------------------------------- */ .dtb-view-toggle-wrap { display: inline-flex; align-items: center; gap: 10px; background: #f5f7fa; border: 1px solid #dde1e8; border-radius: 6px; padding: 8px 14px; margin: 6px 0 10px; cursor: pointer; user-select: none; } .dtb-toggle-label { font-size: 0.88em; font-weight: 500; color: #444; line-height: 1.3; } /* Input checkbox oculto */ .dtb-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } /* Switch visual */ .dtb-toggle-switch-label { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; } .dtb-toggle-slider { position: relative; display: inline-block; width: 42px; height: 24px; background: #c5cad3; border-radius: 12px; transition: background 200ms ease; } .dtb-toggle-slider::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: left 200ms ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } /* Toggle encendido (vista Bs.) */ html.dtb-view-bs .dtb-toggle-slider { background: #3b82f6; } html.dtb-view-bs .dtb-toggle-slider::after { left: 21px; } /* ------------------------------------------------------------------------- Widget de tasa en footer ------------------------------------------------------------------------- */ .dtb-rate-widget { position: fixed; bottom: 20px; right: 20px; z-index: 9999; background: #0D1B3E; color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 0.8em; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); line-height: 1.4; } .dtb-widget-label { font-weight: 700; color: #a0a0c0; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.04em; } .dtb-widget-rate strong { color: #fff; } .dtb-widget-sep { color: #555; } .dtb-widget-discount { color: #CC1F36; font-weight: 600; } /* ------------------------------------------------------------------------- Admin: panel de tasas en orden ------------------------------------------------------------------------- */ .dtb-order-rates { margin-top: 16px; padding: 12px 16px; background: #f8f9fa; border-left: 4px solid #1B3A8F; border-radius: 2px; } .dtb-order-rates h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #0D1B3E; } .dtb-order-rates p { margin: 0; font-size: 13px; line-height: 1.8; color: #333; }