/**
 * =====================================================
 * 📦 Divexa Currency Calculator – ULTRA FINTECH VERSION
 * Versión estable final
 * =====================================================
 */


/* =====================================================
   VARIABLES
===================================================== */

:root{

--divexa-card-width:430px;

--divexa-input-height:48px;
--divexa-input-font:28px;

--divexa-registro-height:44px;

--divexa-primary:#16a34a;
--divexa-primary-hover:#15803d;
--divexa-danger:#dc2626;

--divexa-bg-soft:#f8fafc;
--divexa-bg-light:#f1f5f9;

--divexa-border:#e2e8f0;

--divexa-text-main:#0f172a;
--divexa-text-muted:#64748b;

--divexa-radius-main:18px;
--divexa-radius-soft:12px;

}


/* =====================================================
   RESET
===================================================== */

#divexa-calculadora,
#divexa-calculadora *{

box-sizing:border-box;
font-family:'Inter',system-ui,-apple-system,sans-serif;

}


/* =====================================================
   WRAPPER
===================================================== */

.divexa-calculator-wrapper{

width:100%;
padding:60px 20px;

display:flex;
justify-content:center;

}


/* =====================================================
   TARJETA PRINCIPAL
===================================================== */

#divexa-calculadora{

width:100%;
max-width:var(--divexa-card-width);

margin:0 auto;

background:#ffffff;

border-radius:var(--divexa-radius-main);

padding:22px;

border:1px solid var(--divexa-border);

box-shadow:0 20px 40px rgba(15,23,42,0.08);

transition:all .3s ease;

}


/* =====================================================
   CONTENEDOR TASAS
===================================================== */

#divexa-calculadora .divexa-tasas-container{

background:var(--divexa-bg-light);

border-radius:var(--divexa-radius-soft);

padding:14px;

border:1px solid var(--divexa-border);

margin-bottom:16px;

}


/* =====================================================
   FILA TASAS
===================================================== */

#divexa-calculadora .divexa-tasas-row{

display:flex;

}


/* =====================================================
   COLUMNAS TASAS
===================================================== */

#divexa-calculadora .divexa-tasa-box{

flex:1;

padding:6px 12px;

}


/* línea divisoria */

#divexa-calculadora .divexa-tasa-box:first-child{

border-right:1px solid var(--divexa-border);

}


/* =====================================================
   LABEL
===================================================== */

#divexa-calculadora .divexa-tasa-label{

font-size:13px;

font-weight:600;

color:var(--divexa-text-muted);

margin-bottom:4px;

}


/* =====================================================
   VALORES
===================================================== */

#divexa-calculadora .divexa-tasa-value{

font-size:22px;

font-weight:700;

}

#divexa-calculadora .divexa-compra{

color:var(--divexa-primary);

}

#divexa-calculadora .divexa-venta{

color:var(--divexa-danger);

}


/* =====================================================
   CAMPOS
===================================================== */

.divexa-field{

margin-bottom:18px;

}

.divexa-field-title{

font-size:16px;
font-weight:700;

color:var(--divexa-text-main);

}


/* =====================================================
   INPUTS
===================================================== */

#divexa-calculadora input.divexa-input{

width:100%;

height:var(--divexa-input-height);

padding:0 18px;

font-size:var(--divexa-input-font);

font-weight:700;

text-align:right;

border-radius:var(--divexa-radius-soft);

border:1.5px solid var(--divexa-border);

background:#ffffff;

outline:none;

transition:all .2s ease;

}


#divexa-calculadora input.divexa-input:focus{

border-color:var(--divexa-primary);

box-shadow:0 0 0 4px rgba(22,163,74,.15);

}


.divexa-input-readonly{

background:#f0fdf4;
color:var(--divexa-primary);

}


/* =====================================================
   INTERCAMBIO
===================================================== */

.divexa-intercambio{

margin:-2px 0;

display:flex;

align-items:center;
justify-content:center;

}


.divexa-linea{

flex:1;

height:1px;

background:var(--divexa-border);

}


.divexa-flecha{

width:38px;
height:38px;

font-size:20px;

margin:0 12px;

border-radius:50%;

border:1.5px solid var(--divexa-primary);

display:flex;

align-items:center;
justify-content:center;

color:var(--divexa-primary);

cursor:pointer;

transition:all .2s ease;

}


.divexa-flecha:hover{

background:var(--divexa-primary);

color:#ffffff;

transform:scale(1.05);

}


/* =====================================================
   BOTÓN PRINCIPAL
===================================================== */

.divexa-btn{

width:100%;

padding:16px;

margin-top:8px;

background:var(--divexa-primary);

color:#ffffff;

border:none;

border-radius:14px;

font-size:16px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.5px;

cursor:pointer;

transition:all .2s ease;

}


.divexa-btn:hover{

background:var(--divexa-primary-hover);

}


/* =====================================================
   REGISTRO
===================================================== */

.divexa-registro-box{

width:100%;

height:var(--divexa-registro-height);

margin:18px auto 0;

background:#fef9c3;

border-radius:var(--divexa-radius-soft);

border:1px solid #fde047;

display:flex;

justify-content:center;
align-items:center;

padding:0 16px;

}


.divexa-registro-box p{

margin:0;

font-size:14px;

color:#854d0e;

text-align:center;

}


.divexa-registro-box a{

font-weight:700;

color:#a16207;

}


/* =====================================================
   MONEDAS
===================================================== */

.divexa-field-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:8px;

}


.divexa-moneda{

display:flex;

align-items:center;

gap:6px;

}


.divexa-sigla{

font-weight:700;
font-size:16px;

color:var(--divexa-text-main);

}


.divexa-nombre{

font-size:13px;

color:var(--divexa-text-muted);

}


.divexa-bandera{

width:22px;
height:15px;

border-radius:3px;

background-size:cover;
background-position:center;

}


.bandera-pen{
background-image:url('https://flagcdn.com/w40/pe.png');
}

.bandera-usd{
background-image:url('https://flagcdn.com/w40/us.png');
}
/* =========================================
   TASAS EN 2 COLUMNAS
========================================= */

#divexa-calculadora .divexa-tasas-row{

display:flex !important;

flex-direction:row !important;

}

#divexa-calculadora .divexa-tasa-box{

flex:1;

display:flex;

flex-direction:column;

padding:8px 12px;

}

/* línea divisoria */

#divexa-calculadora .divexa-tasa-box:first-child{

border-right:1px solid #e2e8f0;

}

/* =====================================================
   RESPONSIVE MOBILE
===================================================== */

@media (max-width:768px){

#divexa-calculadora{
max-width:100%;
}

.divexa-calculator-wrapper{
padding:20px 0;
}

:root{

--divexa-input-font:24px;
--divexa-input-height:52px;

}

}