/* ===================================================================
   estadisticas.css - Panel de administrador (TiendApp)
   Tarjetas de métricas con bordes redondeados, distribuidas en grilla
   =================================================================== */

.grid-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.tarjeta-metrica {
    background: var(--fondo-tarjeta, #fff);
    border-radius: 22px; /* bordes bien redondeados, como se pidió */
    padding: 22px 20px;
    box-shadow: 0 6px 18px rgba(28, 27, 11, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--borde-sutil, #f1ece0);
}

.tarjeta-metrica::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--color-crema);
    opacity: 0.6;
    z-index: 0;
}

.tarjeta-metrica-icono {
    font-size: 26px;
    z-index: 1;
}

.tarjeta-metrica-valor {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-naranja-texto);
    z-index: 1;
}

.tarjeta-metrica-etiqueta {
    font-size: 13px;
    color: var(--texto-secundario, var(--color-oscuro));
    opacity: 0.8;
    z-index: 1;
}

/* Variantes de color del ícono/valor para diferenciar tipos de métrica */
.tarjeta-metrica.acento-verde .tarjeta-metrica-valor { color: var(--color-verde-oscuro, #3c6b12); }
.tarjeta-metrica.acento-amarillo .tarjeta-metrica-valor { color: #a67c00; }

/* ============================
   Bloques de ranking (productos más vendidos / clientes top)
   ============================ */
.grid-rankings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.tarjeta-ranking {
    background: var(--fondo-tarjeta, #fff);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 6px 18px rgba(28, 27, 11, 0.08);
}

.tarjeta-ranking h2 {
    font-size: 16px;
    color: var(--color-naranja-texto);
    margin-bottom: 14px;
}

.fila-ranking {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borde-sutil, #f1ece0);
}

.fila-ranking:last-child {
    border-bottom: none;
}

.fila-ranking-puesto {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-crema);
    color: var(--color-naranja-texto);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fila-ranking-puesto.top1 { background: var(--color-amarillo); color: var(--color-oscuro); }

.fila-ranking-info {
    flex: 1;
    min-width: 0;
}

.fila-ranking-info strong {
    display: block;
    font-size: 14px;
    color: var(--texto-principal, var(--color-oscuro));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fila-ranking-info span {
    font-size: 12px;
    opacity: 0.65;
}

.fila-ranking-valor {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-naranja-texto);
    white-space: nowrap;
}

.sin-datos-ranking {
    font-size: 13px;
    opacity: 0.6;
    padding: 10px 0;
}

@media (max-width: 480px) {
    .grid-metricas { grid-template-columns: repeat(2, 1fr); }
    .tarjeta-metrica { padding: 16px 14px; border-radius: 18px; }
    .tarjeta-metrica-valor { font-size: 20px; }
}

/* ---- Gráfica de barras de los últimos días ---- */
.tarjeta-ranking.ancha{grid-column:1/-1}
.barras-dias{display:flex;align-items:flex-end;gap:10px;height:160px;margin-top:14px}
.barras-dias li{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;list-style:none;font-size:11px}
.barras-dias .barra{width:100%;max-width:46px;min-height:4px;border-radius:10px 10px 4px 4px;background:var(--color-naranja,#FF6016)}
.barras-dias .barra-valor{margin-bottom:4px;font-weight:700}
.barras-dias .barra-dia{margin-top:6px;opacity:.7}
.lista-ranking{list-style:none;padding:0;margin:0}