/* Frontera Fest Admin — styles.css */
:root {
    --ff-orange: #ff7a1a;
    --ff-orange-2: #ff914d;
    --ff-charcoal: #111316;
    --ff-black: #0b0c0f;
    --ff-gray: #1a1d21;
}

html, body {
    height: 100%;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(255, 122, 26, .12), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(255, 105, 0, .10), transparent 60%),
    linear-gradient(180deg, var(--ff-black), var(--ff-charcoal));
}

.navbar {
    background: linear-gradient(90deg, rgba(255, 122, 26, .12) 0%, rgba(0, 0, 0, 0) 35%), var(--ff-gray) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.brand-dot {
    width: .65rem;
    height: .65rem;
    display: inline-block;
    background: radial-gradient(circle at 30% 30%, #ffd7b2, var(--ff-orange));
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 122, 26, .8);
    margin-right: .4rem;
}

.btn-ff {
    background: linear-gradient(180deg, var(--ff-orange), var(--ff-orange-2));
    color: #111;
    border: none;
    box-shadow: 0 6px 18px rgba(255, 122, 26, .32);
}

.btn-ff:hover {
    filter: brightness(1.05);
    color: #111;
}

.text-ff {
    color: var(--ff-orange) !important;
}

.badge-ff {
    background: rgba(255, 122, 26, .15);
    color: var(--ff-orange);
    border: 1px solid rgba(255, 122, 26, .35);
}

.ff-card {
    background: linear-gradient(180deg, #121417, #0f1114);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.ff-card .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.offcanvas-header, .offcanvas-footer {
    border-color: rgba(255, 255, 255, .06) !important;
}

.form-select, .form-control {
    background-color: #0f1114;
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ff-orange);
    box-shadow: 0 0 0 .2rem rgba(255, 122, 26, .25);
}

.link-muted {
    color: #9aa3ad;
}

.link-muted:hover {
    color: #c0c8d1;
}

.glow {
    text-shadow: 0 0 24px rgba(255, 122, 26, .35);
}

.cursor-pointer {
    cursor: pointer;
}

/* Login hero */
.login-hero {
    background: radial-gradient(220px 140px at 100% 0%, rgba(255, 122, 26, .16), transparent 40%),
    radial-gradient(140px 100px at 0% 0%, rgba(255, 122, 26, .10), transparent 40%),
    linear-gradient(160deg, #0b0c0f, #121417 60%);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

/* Responsive table -> cards on mobile */
@media (max-width: 768px) {
    table.ff-table thead {
        display: none;
    }

    table.ff-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: .75rem;
        overflow: hidden;
    }

    table.ff-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .75rem 1rem;
    }

    table.ff-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #b6bec9;
    }
}

/* ---- Flamas (rating) ---- */
.flame-group{
    display:inline-flex; flex-direction: row-reverse; gap:.35rem;
}
.flame-group .flame{
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
    transition: transform .08s ease, filter .08s ease, opacity .2s ease;
}
.flame-group .flame i{
    vertical-align: middle;
    color: #5a5f66; /* apagada */
}
.flame-group .flame.hover i,
.flame-group .flame.on i{
    color: var(--ff-orange);
    filter: drop-shadow(0 0 6px rgba(255,122,26,.6));
    opacity: 1;
}
.flame-group .flame:hover{ transform: translateY(-1px) scale(1.04); }


/* —— High-contrast overrides solo para esta página —— */
.ff-body { color:#fff; }

/* Tarjetas y cabeceras */
.ff-body .card { color:#fff; }
.ff-body .card-header { color:#fff; }

/* Tipografía: que todo el texto se lea blanco */
.ff-body .form-label,
.ff-body dt, .ff-body dd,
.ff-body .form-text,
.ff-body .small,
.ff-body .text-secondary,
.ff-body .status-badge { color:#fff !important; opacity:1; }

/* Inputs/Selects/Textareas en modo oscuro */
.ff-body .form-control,
.ff-body .form-select,
.ff-body textarea {
    color:#fff;
    background-color: rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.45);
}
.ff-body .form-control::placeholder,
.ff-body textarea::placeholder { color: rgba(255,255,255,.7); }
.ff-body .form-control:focus,
.ff-body .form-select:focus,
.ff-body textarea:focus {
    color:#fff;
    background-color: rgba(0,0,0,.45);
    border-color:#fff;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.15);
}

/* Botones ya quedan bien con tu paleta; no tocar */

/* Radios “flama”: valores más legibles al seleccionar */
.ff-body .flame input:checked ~ .val { color:#ffe8c7; font-weight:700; }

/* Mantener contraste correcto de badges “warning” que usan text-dark */
.ff-body .badge.bg-warning.text-dark { color:#1a1a1a !important; }

/* Alerts: dejar los estilos de Bootstrap (texto oscuro sobre fondo claro) */