* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Arial,sans-serif; background:#f8f9fc; color:#2c3e50; }
.container { max-width:1360px; margin:20px auto; background:white; border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,0.12); overflow:hidden; }

header { background:linear-gradient(135deg,#1e3c72,#2a5298); color:white; padding:40px; text-align:center; }
h1 { font-size:34px; font-weight:900; margin:0; }

.upload-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.upload-section button { 
    padding:14px 36px; 
    border:none; 
    border-radius:50px; 
    font-size:17px; 
    font-weight:700; 
    cursor:pointer; 
    transition:all .3s; 
    box-shadow:0 8px 25px rgba(0,0,0,0.2); 
}
#loadData { background:#e74c3c; } 
#loadData:hover { background:#c0392b; transform:translateY(-4px); }
.reset-btn { background:#636e72; } 
.reset-btn:hover { background:#4d565b; transform:translateY(-4px); }

.loading { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.98); z-index:9999; justify-content:center; align-items:center; flex-direction:column; }
.spinner { width:90px; height:90px; border:8px solid #f0f0f0; border-top:8px solid #3498db; border-radius:50%; animation:s 1s linear infinite; margin-bottom:20px; }
@keyframes s { to { transform:rotate(360deg); } }

.performance-warning { background:#fff8e1; color:#d35400; padding:20px; margin:30px; border-radius:16px; text-align:center; font-weight:600; border-left:6px solid #f39c12; }

.kpi-cards { display:flex; flex-wrap:wrap; gap:25px; justify-content:center; padding:50px 20px; background:#f0f4f8; }
.card { background:white; padding:32px; border-radius:20px; width:310px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,0.1); transition:transform .4s; }
.card:hover { transform:translateY(-12px); }
.value { font-size:44px; font-weight:900; margin:10px 0; }
.usd7 { background:linear-gradient(135deg,#11998e,#38ef7d) !important; color:white; }
.usd105 { background:linear-gradient(135deg,#ff6b6b,#feca57) !important; color:white; }

/* ====================== CEDIS vs OTROS ====================== */
.comparison-section {
    padding: 70px 20px;
    background: linear-gradient(135deg, #f8f9fc, #e8f0fe);
    text-align: center;
}

.comparison-section h2 {
    font-size: 29px;
    margin-bottom: 45px;
    color: #2c3e50;
}

/* TORTA */
.pie-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

#cedisPieChart {
    max-width: 380px;
    max-height: 380px;
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 260px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 20px;
}

.color-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.cedi-color   { background: #27ae60; }
.others-color { background: #e67e22; }

.percent-value {
    font-size: 28px;
    font-weight: 800;
    margin-left: auto;
    color: #2c3e50;
}

/* TARJETAS */
.comparison-cards {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.comp-card {
    background: white;
    padding: 35px 45px;
    border-radius: 24px;
    width: 360px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    transition: all 0.4s;
}

.comp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.18);
}

.comp-card.cedi {
    border-top: 8px solid #27ae60;
}

.comp-card.others {
    border-top: 8px solid #e67e22;
}

.comp-card h3 {
    font-size: 21px;
    margin-bottom: 12px;
    color: #2c3e50;
}

.comp-card .value {
    font-size: 48px;
    font-weight: 900;
    margin: 15px 0 8px 0;
}

.comp-card.cedi .value { color: #27ae60; }
.comp-card.others .value { color: #e67e22; }

.comp-card .subtitle {
    font-size: 17px;
    color: #7f8c8d;
}

/* ====================== GRÁFICOS Y TABLAS ====================== */
.charts-container { padding:60px 20px; }
.chart-container { max-width:1000px; margin:0 auto 80px; background:white; padding:45px; border-radius:28px; box-shadow:0 25px 70px rgba(0,0,0,0.15); }
.chart-container h2 { text-align:center; margin-bottom:40px; font-size:28px; font-weight:800; color:#2c3e50; }

.chart-container canvas {
    border-radius:20px;
    background:white;
    padding:30px;
    box-shadow:0 20px 50px rgba(0,0,0,0.18);
    width:100% !important;
    height:540px !important;
    max-width:100%;
    display:block;
    margin:0 auto;
}

.table-container { padding:0 40px 80px; }
.table-container h2 { text-align:center; margin:60px 0 35px; font-size:28px; font-weight:800; color:#2c3e50; }

table { width:100%; border-collapse:separate; border-spacing:0; background:white; border-radius:24px; overflow:hidden; box-shadow:0 25px 70px rgba(0,0,0,0.15); }
th { background:linear-gradient(135deg,#2c3e50,#34495e); color:white; padding:22px; font-weight:700; font-size:16px; text-align:center; }
td { padding:18px; text-align:center; border-bottom:1px solid #eee; font-size:15px; }
tr:hover { background:#f8fbff; }
.summary { background:linear-gradient(135deg,#2c3e50,#1a2530) !important; color:white; font-weight:900; font-size:18px; }

@media (max-width:768px) {
    .chart-container canvas { height:420px !important; }
    .card, .comp-card { width:100%; max-width:340px; }
    .pie-container { gap:40px; }
    .container { margin:10px; }
}