/**
 * Archivo NUEVO: assets/css/shared/exchange-stats.css
 * Origen: maqueta "La Tienda Natural - Intercambios.html", bloque
 *         "shared/ NUEVO — .ltn-stat-tile"
 * Versión: 1.0.0
 * Creado: DEUDA-CSS-004, Fase 2 — 2026-08-16
 *
 * Tarjeta de métrica del dashboard de "Mis intercambios", orientada a
 * acción ("Esperan tu respuesta") en vez de vanidad (conteos neutros).
 * Sustituye a .ltn-stat-card de shared/exchange-cards.css (Fase 1) en
 * dashboard-mis-intercambios.php.
 *
 * Uso:
 *   <div class="ltn-stat-grid">
 *     <div class="ltn-stat-tile ltn-stat-tile--action">
 *       <span class="ltn-stat-tile__icon"><svg>...</svg></span>
 *       <div>
 *         <div class="ltn-stat-tile__num">3</div>
 *         <div class="ltn-stat-tile__label">Esperan tu respuesta</div>
 *       </div>
 *     </div>
 *   </div>
 */

.ltn-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ltn-spacing-md);
    margin-bottom: var(--ltn-spacing-xl);
}

.ltn-stat-tile {
    background: var(--ltn-white);
    border: var(--ltn-border);
    border-radius: var(--ltn-border-radius-lg);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--ltn-transition);
}

.ltn-stat-tile:hover {
    border-color: var(--ltn-green-light);
    box-shadow: var(--ltn-shadow-sm);
}

.ltn-stat-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ltn-border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ltn-green-bg);
    color: var(--ltn-green-primary);
    flex-shrink: 0;
}

/* Variante --action: destaca el número que exige respuesta del usuario.
   Usa --ltn-terra-bg-light (DEUDA-CSS-004 Fase 2, aprobado 2026-08-16,
   ver shared/variables.css). */
.ltn-stat-tile--action .ltn-stat-tile__icon {
    background: var(--ltn-terra-bg-light);
    color: var(--ltn-terra-deep, #B95F33);
}

.ltn-stat-tile--alert .ltn-stat-tile__icon {
    background: var(--ltn-warning-bg);
    color: var(--ltn-warning-text);
}

.ltn-stat-tile__num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--ltn-gray-800);
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}

.ltn-stat-tile__label {
    font-size: var(--ltn-font-size-sm);
    color: var(--ltn-gray-500);
    line-height: 1.35;
    text-wrap: balance;
}

.ltn-stat-tile--action .ltn-stat-tile__num {
    color: var(--ltn-terra-deep, #B95F33);
}

@media (max-width: 720px) {
    .ltn-stat-grid {
        grid-template-columns: 1fr;
    }
}