/* ============================================
   RunPassMX — Brand Color System
   ============================================
   Single source of truth for all RunPassMX colors.
   Loaded globally via layouts/app.blade.php after Bootstrap CDN.

   USAGE RULES
   ---------
   • --rp-green     → interaction, selection, positive states, icons, links
   • --rp-red       → primary CTA, registration, "Proceder al Pago", destructive
   • --rp-black     → titles, high-hierarchy text, dark backgrounds (navbar/footer)
   • --rp-gray*     → secondary text, borders, editorial content

   DO NOT introduce new brand colors (Bootstrap blue, cyan, orange, purple).
   Before creating a new class, check if an existing one applies.
   ============================================ */

:root {
    /* Brand greens */
    --rp-green: #078747;
    --rp-green-dark: #056A39;
    --rp-green-soft: #E8F6EF;

    /* Brand reds */
    --rp-red: #E62B32;
    --rp-red-dark: #C91F27;
    --rp-red-soft: #FDEBEC;

    /* Neutrals */
    --rp-black: #0D1110;
    --rp-black-dark: #090C0B;
    --rp-gray-dark: #29302D;
    --rp-gray: #68716D;
    --rp-gray-muted: #B8C0BC;
    --rp-border: #E8ECE9;
    --rp-border-dark: #202723;
    --rp-light: #F5F7F5;
    --rp-white: #FFFFFF;

    /* Convenience RGB for rgba() shadows/halos */
    --rp-green-rgb: 7, 135, 71;
}

/* ===== Navbar background ===== */
.bg-runpass-dark {
    background-color: var(--rp-black);
}

/* ===== CTA verde — Organiza tu evento / Agregar Persona ===== */
.btn-runpass-green {
    background-color: var(--rp-green);
    border-color: var(--rp-green);
    color: var(--rp-white);
}
.btn-runpass-green:hover {
    background-color: var(--rp-green-dark);
    border-color: var(--rp-green-dark);
    color: var(--rp-white);
}

/* ===== CTA rojo — Registrarse / Proceder al Pago ===== */
.btn-runpass-red {
    background-color: var(--rp-red);
    border-color: var(--rp-red);
    color: var(--rp-white);
}
.btn-runpass-red:hover {
    background-color: var(--rp-red-dark);
    border-color: var(--rp-red-dark);
    color: var(--rp-white);
}

/* ===== Nav link ===== */
.nav-link-runpass {
    color: var(--rp-gray-muted);
}
.nav-link-runpass:hover {
    color: var(--rp-white);
}

/* ===== Logout button ===== */
.btn-runpass-logout {
    color: var(--rp-red);
    border-color: var(--rp-red);
    background-color: transparent;
}
.btn-runpass-logout:hover {
    background-color: var(--rp-red);
    color: var(--rp-white);
}

/* ===== Muted greeting text ===== */
.text-runpass-muted {
    color: var(--rp-gray-muted);
}

/* ===== Green accent text ===== */
.text-runpass-green {
    color: var(--rp-green);
}

/* ===== Soft green badge — benefits ===== */
.badge-runpass-green {
    background-color: rgba(var(--rp-green-rgb), 0.12);
    color: var(--rp-green);
}

/* ===== Card border ===== */
.border-runpass {
    border-color: var(--rp-border);
}

/* ===== Light gray background — cards section ===== */
.bg-runpass-light {
    background-color: var(--rp-light);
}

/* ===== Footer background ===== */
.bg-runpass-footer {
    background-color: var(--rp-black-dark);
}

/* ===== Footer link ===== */
.link-runpass-footer {
    color: var(--rp-gray-muted);
    transition: color 0.15s ease;
}
.link-runpass-footer:hover {
    color: var(--rp-white);
}

/* ===== Footer bottom border ===== */
.border-runpass-dark {
    border-color: var(--rp-border-dark) !important;
}

/* ===== Footer discrete text ===== */
.text-runpass-discrete {
    color: var(--rp-gray);
}

/* ===== Uniform card image ===== */
.rp-card-img {
    object-fit: cover;
    height: 220px;
}

/* ===== Muted badge — neutral for roles ===== */
.bg-runpass-muted {
    background-color: var(--rp-gray-dark);
}

/* ===== Tariff selector card ===== */
.tarifa-card {
    border: 1px solid var(--rp-border);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tarifa-card:hover {
    border-color: var(--rp-green);
    background-color: rgba(var(--rp-green-rgb), 0.05);
}

/* ===== Soft green background — info blocks ===== */
.bg-runpass-green-soft {
    background-color: var(--rp-green-soft);
}

/* ===== Green background — badges, active states, stats ===== */
.bg-runpass-green {
    background-color: var(--rp-green) !important;
}

/* ===== Form focus — green RunPassMX ===== */
.form-control:focus,
.form-select:focus {
    border-color: var(--rp-green);
    box-shadow: 0 0 0 0.2rem rgba(var(--rp-green-rgb), 0.15);
}

/* ===== Mode toggle — green active state ===== */
#modoInscripcion .btn-primary {
    background-color: var(--rp-green);
    border-color: var(--rp-green);
    color: var(--rp-white);
}
#modoInscripcion .btn-primary:hover {
    background-color: var(--rp-green-dark);
    border-color: var(--rp-green-dark);
}
#modoInscripcion .btn-outline-primary {
    background-color: var(--rp-white);
    color: var(--rp-gray);
    border-color: var(--rp-border);
}
#modoInscripcion .btn-outline-primary:hover {
    background-color: var(--rp-light);
    color: var(--rp-black);
    border-color: var(--rp-green);
}

/* ===== Form label ===== */
.form-label-runpass {
    color: var(--rp-gray-dark);
}

/* ===== Payment method — radio selected state ===== */
.payment-option .form-check-input:checked {
    background-color: var(--rp-green);
    border-color: var(--rp-green);
}
.payment-option:has(input:checked) {
    border-color: var(--rp-green) !important;
    background-color: var(--rp-green-soft);
}

/* ===== Dashboard stat cards ===== */
.rp-stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rp-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.rp-stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.8rem;
}
.rp-progress {
    height: 8px;
    border-radius: 4px;
}

/* ===== Reusable info alert — replaces alert-info ===== */
.alert-runpass-info {
    background-color: var(--rp-green-soft);
    border: 0;
    color: var(--rp-gray-dark);
}