Todavía no hay tabla de clasificación :(
/* ── Variables necesarias (si no las tienes ya) ── */
:root {
--navy: #0B1F3A;
--teal: #00B89F;
--teal-dark: #008E79;
}
/* ── Calculator card ── */
.calc-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 32px;
backdrop-filter: blur(8px);
}
.calc-title {
font-size: 13px; font-weight: 500;
color: rgba(255,255,255,0.5);
text-transform: uppercase; letter-spacing: 0.8px;
margin-bottom: 20px;
}
.calc-tabs {
display: flex; gap: 6px; margin-bottom: 24px;
background: rgba(255,255,255,0.05);
border-radius: 100px; padding: 4px;
}
.calc-tab {
flex: 1; padding: 8px 12px;
border-radius: 100px; border: none; cursor: pointer;
font-size: 12px; font-weight: 500;
background: transparent;
color: rgba(255,255,255,0.5);
transition: all 0.2s;
}
.calc-tab.active {
background: var(--teal);
color: var(--navy);
}
.calc-label {
font-size: 13px; color: rgba(255,255,255,0.55);
margin-bottom: 10px;
}
.calc-amount {
font-size: 44px; color: #fff;
letter-spacing: -1px;
margin-bottom: 4px;
}
.calc-amount span:first-child { font-size: 22px; color: var(--teal); }
input[type=range] {
width: 100%; margin: 16px 0 20px;
-webkit-appearance: none;
height: 4px;
border-radius: 2px;
background: linear-gradient(to right, var(--teal) 50%, rgba(255,255,255,0.12) 50%);
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--teal);
border: 3px solid var(--navy);
box-shadow: 0 0 0 2px var(--teal);
cursor: pointer;
}
.calc-details {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-bottom: 24px;
}
.calc-detail {
background: rgba(255,255,255,0.04);
border-radius: 10px; padding: 12px 14px;
}
.calc-detail-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.calc-detail-val { font-size: 16px; font-weight: 500; color: #fff; }
.calc-cta {
width: 100%; padding: 14px;
background: var(--teal);
color: var(--navy);
font-size: 15px; font-weight: 600;
border: none; border-radius: 100px; cursor: pointer;
transition: background 0.2s, transform 0.15s;
}
.calc-cta:hover { background: #00cdb3; transform: translateY(-1px); }