/* ===================================================
   IMPORTABO
   STYLE.CSS
   BLOQUE 1
=================================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Variables */

:root{

    --bg:#060b13;
    --bg2:#0b1322;

    --card:rgba(14,22,37,.70);

    --green:#00ff88;
    --green-dark:#00c96b;

    --white:#ffffff;

    --text:#d7e0ef;
    --text2:#93a1bb;

    --border:rgba(0,255,136,.16);

    --shadow:rgba(0,0,0,.55);

    --radius:18px;

    --transition:.30s;

}


/* Reset */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    color:var(--text);

    background:

        radial-gradient(circle at top left,#0d3c26 0%,transparent 28%),

        radial-gradient(circle at bottom right,#092437 0%,transparent 35%),

        linear-gradient(180deg,#060b13,#07111c);

    min-height:100vh;

    overflow-x:hidden;

}


/* Fondo */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        linear-gradient(

            rgba(255,255,255,.015),

            transparent

        );

    pointer-events:none;

}


/* Contenedor */

.container{

    width:min(1200px,92%);

    margin:auto;

    padding:60px 0;

}


/* Header */

header{

    margin-bottom:45px;

}

header h1{

    font-size:48px;

    font-weight:800;

    color:#fff;

    letter-spacing:-1px;

}

header h1 span{

    color:var(--green);

}

header p{

    margin-top:10px;

    color:var(--text2);

    font-size:18px;

    max-width:700px;

    line-height:1.7;

}


/* Layout */

.main-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:30px;

    align-items:start;

}


/* Cards */

.card{

    background:var(--card);

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

    backdrop-filter:blur(18px);

    border-radius:var(--radius);

    padding:28px;

    box-shadow:

        0 15px 35px var(--shadow);

    transition:var(--transition);

}

.card:hover{

    border-color:rgba(0,255,136,.35);

    transform:translateY(-4px);

    box-shadow:

        0 20px 45px rgba(0,0,0,.65),

        0 0 30px rgba(0,255,136,.10);

}


/* Títulos */

.card h2{

    font-size:22px;

    margin-bottom:18px;

    color:#fff;

}

.card h3{

    font-size:18px;

    margin-bottom:15px;

}


/* Separadores */

.divider{

    width:100%;

    height:1px;

    background:rgba(255,255,255,.06);

    margin:25px 0;

}


/* Texto */

p{

    line-height:1.7;

}


/* Badges */

.badge{

    display:inline-flex;

    align-items:center;

    padding:7px 15px;

    border-radius:999px;

    background:rgba(0,255,136,.10);

    border:1px solid rgba(0,255,136,.20);

    color:var(--green);

    font-size:13px;

    font-weight:600;

}


/* Glow */

.glow{

    position:relative;

}

.glow::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

        radial-gradient(

            circle,

            rgba(0,255,136,.12),

            transparent 70%

        );

    z-index:-1;

}


/* Responsive */

@media(max-width:1000px){

.main-grid{

grid-template-columns:1fr;

}

}
/* ===================================================
   IMPORTABO
   BLOQUE 2
   FORMULARIOS
===================================================*/

label{

    display:block;

    margin-bottom:8px;

    color:var(--text);

    font-size:14px;

    font-weight:600;

}

input[type=text],
input[type=number]{

    width:100%;

    height:58px;

    padding:0 18px;

    border-radius:14px;

    outline:none;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    color:white;

    font-size:15px;

    transition:.30s;

}

input::placeholder{

    color:#70819d;

}

input:focus{

    border-color:var(--green);

    box-shadow:

    0 0 0 4px rgba(0,255,136,.08),

    0 0 18px rgba(0,255,136,.18);

}


/* Radio Buttons */

.radio-group{

    display:flex;

    gap:20px;

    margin-top:10px;

    margin-bottom:20px;

}

.radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    font-weight:500;

}

input[type=radio]{

    accent-color:var(--green);

    transform:scale(1.15);

}


/* Buscador */

.search-box{

    position:relative;

}

#search{

    padding-left:52px;

}

.search-box::before{

    content:"🔍";

    position:absolute;

    left:18px;

    top:17px;

    font-size:18px;

    opacity:.7;

}


/* Dropdown */

#suggestions{

    margin-top:8px;

    border-radius:16px;

    overflow:hidden;

    background:#10192b;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

    0 20px 35px rgba(0,0,0,.35);

}

.item{

    padding:16px 18px;

    cursor:pointer;

    transition:.25s;

    border-bottom:1px solid rgba(255,255,255,.04);

}

.item:last-child{

    border-bottom:none;

}

.item:hover{

    background:rgba(0,255,136,.08);

    color:var(--green);

    padding-left:26px;

}


/* Tarjeta Producto */

#productCard{

    display:none;

    animation:fadeCard .35s ease;

}

#productName{

    color:white;

    font-size:22px;

    margin-bottom:18px;

}

#productCard p{

    margin-bottom:10px;

    color:var(--text2);

}

#productCard span{

    color:white;

}


/* Botón */

button{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    letter-spacing:.5px;

    color:white;

    background:

    linear-gradient(

        135deg,

        #00d26f,

        #00ff88

    );

    transition:.30s;

    margin-top:20px;

}

button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 28px rgba(0,255,136,.35);

}

button:active{

    transform:scale(.98);

}


/* Resultado */

.resultado{

    margin-top:30px;

    animation:fadeCard .35s ease;

}

.resultado h2{

    color:white;

    margin-bottom:20px;

}

.resultado p{

    display:flex;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.resultado p:last-of-type{

    border-bottom:none;

}

.resultado h3{

    margin-top:25px;

    text-align:center;

    font-size:30px;

    color:var(--green);

}


/* Animaciones */

@keyframes fadeCard{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* Scroll */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#00d26f;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#07101c;

}
/* ===================================================
   IMPORTABO
   BLOQUE 3
   PREMIUM UI
===================================================*/


/* Luces del fondo */

body::after{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    top:-300px;

    right:-250px;

    background:

    radial-gradient(circle,

        rgba(0,255,136,.12),

        transparent 70%);

    filter:blur(60px);

    z-index:-2;

}

.background-light{

    position:fixed;

    width:600px;

    height:600px;

    left:-250px;

    bottom:-250px;

    background:

    radial-gradient(circle,

        rgba(0,180,255,.08),

        transparent 70%);

    filter:blur(80px);

    z-index:-2;

}


/* Glass Premium */

.card{

    position:relative;

    overflow:hidden;

}

.card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:

    radial-gradient(circle,

        rgba(255,255,255,.05),

        transparent 70%);

    top:-120px;

    right:-120px;

    pointer-events:none;

}


/* Glow */

.card:hover{

    box-shadow:

        0 15px 50px rgba(0,0,0,.55),

        0 0 35px rgba(0,255,136,.18);

}


/* Badge HS */

.badge-hs{

    display:inline-flex;

    padding:7px 16px;

    border-radius:999px;

    background:rgba(0,255,136,.08);

    border:1px solid rgba(0,255,136,.18);

    color:var(--green);

    font-size:13px;

    font-weight:700;

}


/* Tarjeta Resultado */

.resultado{

    position:relative;

}

.resultado::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    padding:1px;

    background:

        linear-gradient(

            135deg,

            rgba(0,255,136,.35),

            transparent,

            rgba(0,255,136,.15)

        );

    -webkit-mask:

        linear-gradient(#fff 0 0)

        content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    pointer-events:none;

}


/* Resultado grande */

.resultado h3{

    font-size:42px;

    margin-top:30px;

    letter-spacing:-1px;

    text-shadow:

    0 0 18px rgba(0,255,136,.35);

}


/* Valores */

.resultado p{

    font-size:15px;

}

.resultado b{

    color:white;

}


/* Hover Inputs */

input:hover{

    border-color:rgba(0,255,136,.18);

}


/* Botón */

button{

    position:relative;

    overflow:hidden;

}

button::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:

        radial-gradient(circle,

            rgba(255,255,255,.35),

            transparent 70%);

    left:-220px;

    top:-80px;

    transition:.7s;

}

button:hover::before{

    left:120%;

}


/* Card aparece */

.card{

    animation:cardShow .45s ease;

}

@keyframes cardShow{

    from{

        opacity:0;

        transform:

        translateY(25px)

        scale(.98);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}


/* Resultado aparece */

.resultado{

    animation:resultShow .5s ease;

}

@keyframes resultShow{

    from{

        opacity:0;

        transform:

        translateY(35px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}


/* Responsive */

@media(max-width:900px){

.container{

padding:30px 18px;

}

header h1{

font-size:34px;

}

.main-grid{

grid-template-columns:1fr;

gap:20px;

}

.card{

padding:22px;

}

button{

height:56px;

}

.resultado h3{

font-size:30px;

}

}


/* Responsive móvil */

@media(max-width:600px){

body{

padding:0;

}

.container{

width:94%;

}

header{

text-align:center;

}

header h1{

font-size:30px;

}

header p{

font-size:15px;

}

.card{

padding:18px;

border-radius:14px;

}

input{

font-size:16px;

}

.resultado h3{

font-size:26px;

}

}


/* Selección */

::selection{

background:rgba(0,255,136,.25);

color:white;

}
/*=========================
HEADER
==========================*/

header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:45px;

gap:30px;

}

.logo h1{

font-size:42px;

font-weight:800;

}

.logo span{

color:var(--green);

}

.logo p{

margin-top:10px;

max-width:600px;

color:var(--text2);

line-height:1.7;

}

nav{

display:flex;

gap:15px;

}

nav a{

display:flex;

align-items:center;

gap:8px;

padding:12px 20px;

border-radius:12px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.05);

text-decoration:none;

color:var(--text);

transition:.30s;

}

nav a:hover{

border-color:rgba(0,255,136,.30);

transform:translateY(-2px);

}

nav a.active{

background:rgba(0,255,136,.10);

color:var(--green);

border-color:rgba(0,255,136,.25);

}

.material-symbols-rounded{

font-size:20px;

}


/* Dashboard */

.main-grid{

display:grid;

grid-template-columns:430px 1fr;

gap:30px;

align-items:start;

}

@media(max-width:1000px){

header{

flex-direction:column;

align-items:flex-start;

}

nav{

width:100%;

overflow:auto;

}

.main-grid{

grid-template-columns:1fr;

}

}

/*=============================
Panel Izquierdo
=============================*/

.subtitle{

color:var(--text2);

line-height:1.6;

margin-top:8px;

}

.search-box{

position:relative;

}

.search-icon{

position:absolute;

left:18px;

top:17px;

color:#8ea1bd;

}

#search{

padding-left:55px;

}

.info-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 0;

border-bottom:1px solid rgba(255,255,255,.05);

}

.info-row span{

color:var(--text2);

}

.info-row strong{

color:white;

font-weight:600;

}

button{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

}
/*=========================
RESULT CARD
==========================*/

.result-card{

position:sticky;

top:30px;

}

.price-box{

display:flex;

align-items:flex-end;

gap:12px;

margin:30px 0;

}

.price-box span{

font-size:52px;

font-weight:800;

color:var(--green);

line-height:1;

text-shadow:

0 0 25px rgba(0,255,136,.35);

}

.price-box small{

font-size:20px;

color:var(--text2);

margin-bottom:8px;

}

.result-grid{

display:grid;

grid-template-columns:1fr;

gap:12px;

margin-top:25px;

}

.result-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px;

border-radius:14px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

transition:.30s;

}

.result-item:hover{

border-color:rgba(0,255,136,.25);

transform:translateX(4px);

}

.result-item span{

color:var(--text2);

}

.result-item strong{

font-size:18px;

color:white;

}

.total{

margin-top:10px;

background:rgba(0,255,136,.08);

border-color:rgba(0,255,136,.18);

}

.total strong{

color:var(--green);

font-size:22px;

}
#particles-js{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:-3;

}
.currency-usd{

    font-size:15px;

    font-weight:700;

    color:#ffffff;

}

.currency-bob{

    margin-top:3px;

    font-size:13px;

    color:#00ff88;

    font-weight:600;

}

/*=========================
RESUMEN PRINCIPAL
=========================*/

.result-title{

    font-size:15px;

    font-weight:600;

    color:#b9c4d0;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:14px;

}

.summary-usd{

    font-size:34px;

    font-weight:700;

    color:#ffffff;

    line-height:1.1;

}

.summary-bob{

    margin-top:8px;

    font-size:22px;

    font-weight:700;

    color:#00d97e;

}

.result-info{

    margin-top:18px;

    font-size:13px;

    color:#8f9aad;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:14px;

}

.exchange-box span{

    display:block;

    font-size:13px;

    color:#8893a8;

    margin-bottom:4px;

}

.exchange-box strong{

    color:#dce6f2;

    font-size:15px;

    font-weight:600;

}

/*==================================
TABLA RESUMEN
==================================*/

.summary-table{

    margin-top:20px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    overflow:hidden;

    background:rgba(255,255,255,.02);

}

.summary-header{

    display:grid;

    grid-template-columns:1.8fr 1.2fr 1.2fr;

    gap:15px;

    padding:14px 18px;

    background:rgba(255,255,255,.05);

    font-size:13px;

    font-weight:700;

    color:#8fa3b8;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.summary-row{

    display:grid;

    grid-template-columns:1.8fr 1.2fr 1.2fr;

    gap:15px;

    align-items:center;

    padding:13px 18px;

    border-top:1px solid rgba(255,255,255,.05);

    transition:.25s;

}

.summary-row:hover{

    background:rgba(255,255,255,.03);

}

.summary-row div:first-child{

    color:#dbe7f5;

    font-weight:600;

}

.summary-row div:nth-child(2){

    text-align:right;

    color:#ffffff;

    font-weight:600;

    white-space:nowrap;

}
.summary-row div:nth-child(3){

    text-align:right;

    color:#00d97e;

    font-weight:700;

    white-space:nowrap;

}

.total-row{

    background:rgba(0,217,126,.08);

}

.total-row div{

    font-size:15px;

    font-weight:700;

}
/*==================================
MÓVIL
==================================*/

@media (max-width:768px){

    .summary-header,
    .summary-row{

        grid-template-columns:1.8fr 1.4fr 1.4fr;

        gap:18px;

    }

    .summary-header{

        font-size:12px;

    }

    .summary-row{

        font-size:14px;

        padding:14px 16px;

    }

}