/* ===============================
   IMEIFAST – BASE
=============================== */
#imeifast-wrapper {
    font-family: 'Inter', sans-serif;
    color: #111827;
}

/* ===============================
   FORMULARIO
=============================== */
.imeifast-form {
    max-width: 520px;
    background: #fff;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    margin: 0 auto 30px;
}

.imeifast-form label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.imeifast-form input,
.imeifast-form select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin-bottom: 18px;
    font-size: 15px;
    background: #f9fafb;
    color: #111827;
}

.imeifast-form input:focus,
.imeifast-form select:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
}

.imeifast-form button {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#1e40af);
    transition: all 0.2s ease;
}

.imeifast-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37,99,235,.35);
}

/* ===============================
   RESULTADOS
=============================== */
#imeifast-result {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #111827;
}

.imeifast-card {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    flex: 1 1 220px;
    transition: transform 0.2s ease;
}

.imeifast-card:hover {
    transform: translateY(-4px);
}

.imeifast-key {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: #6b7280;
}

.imeifast-value {
    font-size: 20px;
    font-weight: 500;
    color: #111827;
    word-break: break-word;
}

/* ===============================
   MENSAJES / ESTADOS
=============================== */
.imeifast-status {
    width: 100%;
    padding: 18px 20px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    animation: imeifastFade .25s ease-in-out;
}

/* ⏳ Procesando */
.imeifast-loading {
    background: linear-gradient(135deg,#e0f2fe,#bae6fd);
    color: #075985;
    border-left: 5px solid #0284c7;
}

/* ❌ Error */
.imeifast-error {
    background: linear-gradient(135deg,#fee2e2,#fef2f2);
    color: #991b1b;
    border-left: 5px solid #dc2626;
}

/* ⚠️ Warning */
.imeifast-warning {
    background: linear-gradient(135deg,#fff7ed,#ffedd5);
    color: #9a3412;
    border-left: 5px solid #f97316;
}

/* 🔐 Login */
.imeifast-login {
    background: linear-gradient(135deg,#f3e8ff,#ede9fe);
    color: #6b21a8;
    border-left: 5px solid #7c3aed;
}

/* ✅ Éxito */
.imeifast-success {
    background: linear-gradient(135deg,#dcfce7,#bbf7d0);
    color: #14532d;
    border-left: 5px solid #16a34a;
}

/* Animación sutil */
@keyframes imeifastFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===============================
   BALANCE / DASHBOARD
=============================== */
.imeifast-balance {
    background: #0f172a;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.imeifast-balance .amount {
    font-size: 26px;
    font-weight: bold;
}

.status.paid { color: #22c55e; font-weight: bold; }
.status.free { color: #94a3b8; font-weight: bold; }

/* ===============================
   BOTONES
=============================== */
.imeifast-btn {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
}

.imeifast-btn:hover {
    background: #1e40af;
}

/* ===============================
   AUTH EXTRA
=============================== */
.imeifast-auth-extra {
    margin-top: 15px;
    text-align: center;
}

.imeifast-btn-register {
    display: inline-block;
    margin-top: 6px;
    padding: 10px 18px;
    background: #f1f1f1;
    color: #333;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}

.imeifast-btn-register:hover {
    background: #ddd;
}

/* ===============================
   MOBILE
=============================== */
@media (max-width: 600px) {
    .imeifast-form {
        padding: 20px;
    }
}
/* ===============================
   RESULT ANIMATION
=============================== */
.imeifast-fade {
    animation: imeifastCard .35s ease-out;
}

@keyframes imeifastCard {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}