/* =============================================
   YEVO — Estilos compartidos
   Paleta: púrpura corporativo YEVO-SGS
   ============================================= */

:root {
    --yevo-900: #3B0764;   /* fondo muy oscuro */
    --yevo-800: #4C1D95;   /* navbar / encabezados */
    --yevo-700: #5B21B6;   /* primario */
    --yevo-600: #6D28D9;   /* acento */
    --yevo-500: #7C3AED;   /* hover / activo */
    --yevo-400: #A78BFA;   /* claro */
    --yevo-100: #EDE9FE;   /* fondo suave */
    --yevo-50:  #F5F3FF;   /* fondo card */

    --green-700: #15803D;
    --green-500: #22C55E;
    --green-100: #DCFCE7;

    --red-600:   #DC2626;
    --red-100:   #FEE2E2;

    --amber-600: #D97706;
    --amber-100: #FEF3C7;
}

/* ── Gradientes ── */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--yevo-800) 0%, var(--yevo-600) 100%) !important;
}
.bg-gradient-success {
    background: linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 100%) !important;
}

/* ── Botones ── */
.btn-gradient-primary {
    background: linear-gradient(135deg, var(--yevo-800) 0%, var(--yevo-500) 100%);
    border: none; color: #fff; transition: all .2s;
}
.btn-gradient-primary:hover {
    background: linear-gradient(135deg, var(--yevo-900) 0%, var(--yevo-600) 100%);
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124,58,237,.4);
}
.btn-gradient-success {
    background: linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 100%);
    border: none; color: #fff; transition: all .2s;
}
.btn-gradient-success:hover {
    background: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(34,197,94,.35);
}

/* ── Texto gradiente ── */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--yevo-600) 0%, var(--yevo-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Inputs ── */
.form-control:focus, .form-select:focus {
    border-color: var(--yevo-500);
    box-shadow: 0 0 0 0.2rem rgba(124,58,237,.2);
}

/* ── Loading overlay ── */
#loadingScreen {
    position: fixed; inset: 0;
    background: rgba(14,5,36,.88);
    display: none; justify-content: center; align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}
#loadingScreen.show { display: flex; }
.loading-content { text-align: center; color: #fff; }
.loading-content .spinner-border {
    width: 3.5rem; height: 3.5rem; border-width: .35rem;
    border-color: rgba(167,139,250,.35);
    border-top-color: var(--yevo-400);
}
.loading-text { margin-top: 1.25rem; font-size: 1.05rem; font-weight: 300; letter-spacing: .03em; }

/* ── Navbar ── */
.btn-logout:hover {
    background: rgba(239,68,68,.25) !important;
    border-color: rgba(239,68,68,.5) !important;
}

/* ── Info cards ── */
.info-card {
    background: #fff;
    border-radius: 10px;
    padding: .65rem .85rem;
    box-shadow: 0 2px 8px rgba(45,16,96,.08);
    border-left: 4px solid var(--yevo-500);
    transition: box-shadow .15s;
}
.info-card:hover { box-shadow: 0 4px 16px rgba(45,16,96,.14); }
.info-card .label {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: .06em; color: #6b7280; font-weight: 600;
}
.info-card .value {
    font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-top: 3px;
    word-break: break-word;
}
.info-card.danger  { border-left-color: var(--red-600); }
.info-card.danger  .value { color: var(--red-600); }
.info-card.success { border-left-color: var(--green-500); }
.info-card.success .value { color: var(--green-700); }
.info-card.warning { border-left-color: var(--amber-600); }
.info-card.warning .value { color: var(--amber-600); }

/* ── Action buttons ── */
.unlock-button {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    color: #fff; border: none;
    padding: .75rem 2.5rem; border-radius: 10px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(217,119,6,.3);
    transition: all .2s; width: 100%; max-width: 360px;
}
.unlock-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(217,119,6,.4);
}
.payment-button {
    background: linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 100%);
    color: #fff; border: none;
    padding: .75rem 2.5rem; border-radius: 10px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(34,197,94,.3);
    transition: all .2s; width: 100%; max-width: 360px;
}
.payment-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34,197,94,.4);
}

/* ── Cuota counter ── */
.cuota-counter {
    display: flex; align-items: center; gap: .6rem;
    justify-content: center; margin: .75rem 0;
}
.cuota-counter button {
    width: 46px; height: 46px; border-radius: 50%;
    border: 2px solid var(--yevo-500); background: #fff; color: var(--yevo-500);
    font-size: 1.5rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.cuota-counter button:hover  { background: var(--yevo-500); color: #fff; }
.cuota-counter button:active { transform: scale(.93); }
.cuota-counter input {
    width: 120px; text-align: center; font-size: 1.4rem;
    font-weight: 700; border: 2px solid #e2e8f0;
    border-radius: 10px; padding: .35rem; color: #1e293b;
}