/* ==========================================================================
   Tokens de marca
   ========================================================================== */
:root {
    --orange: #f26522;
    --navy: #0b2a4a;
    --accent: #ffd166;
    --ink: #111827;
    /* en algunos archivos se usó #0f172a, ambos son oscuros */
    --muted: #6b7280;

    --table-even: rgba(255, 255, 255, .96);
    --table-odd: rgba(0, 0, 0, .02);
    --hover: rgba(242, 101, 34, .12);
}

/* Base */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: linear-gradient(180deg, var(--orange) 0%, #f57934 100%);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
}

/* ==========================================================================
   Topbar / Navbar (común)
   ========================================================================== */
.topbar {
    background: #fff;
    color: var(--navy);
    border-bottom: 4px solid rgba(0, 0, 0, .06);
}

.logo {
    height: 52px;
    width: auto;
}

@media (max-width:768px) {
    .logo {
        height: 44px;
    }
}

.brand-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: clamp(16px, 2.8vw, 28px);
    color: var(--navy);
    margin: 0;
}

/* Toggler (Bootstrap) */
.navbar-light .navbar-toggler {
    border-color: rgba(0, 0, 0, .15);
}

.navbar-light .navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"));
}

/* Acciones en navbar */
.actions .btn {
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

@media (max-width:768px) {
    #mainNav .actions {
        width: 100%;
    }

    #mainNav .actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Botones de tema (comunes)
   ========================================================================== */
.btn {
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.btn-navy {
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
}

.btn-navy:hover {
    background: #0d355c;
    border-color: #0d355c;
    color: #fff;
}

.btn-orange {
    background: var(--orange);
    color: #fff;
    border: 1px solid var(--orange);
}

.btn-orange:hover {
    background: #e25b1f;
    border-color: #e25b1f;
    color: #fff;
}

.btn-ghost {
    background: #15803d;
    color: #fff;

    border: 1px solid rgba(11, 42, 74, .25);
}

.btn-ghost:hover {
    /* verde mas oscuro */
    background: #14532d;
    border-color: rgba(11, 42, 74, .45);
    color: #fff;
}

.btn-red {
    background: #dc2626;
    color: #fff;
    border: 1px solid #dc2626;
}

.btn-red:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.btn-green {
    background: #16a34a;
    color: #fff;
    border: 1px solid #16a34a;
}

.btn-green:hover {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

.btn-accent {
    background: var(--accent);
    color: #0b2a4a;
    border: 1px solid #f2c755;
}

.btn-accent:hover {
    background: #f2c755;
    border-color: #e7b93f;
    color: #fff
}

/* ==========================================================================
   Cards / Headers
   ========================================================================== */
.card {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.card-luxe {
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .20);
    border-radius: 18px;
    overflow: hidden;
}

.card-luxe .card-header,
.card-header {
    background: var(--navy);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.2rem;
}

/* ==========================================================================
   Formularios
   ========================================================================== */
.form-label {
    font-weight: 700;
    color: #0b2a4a;
}

.input-group-text {
    font-weight: 800;
}

.toggle-pass {
    cursor: pointer;
    user-select: none;
}

/* ==========================================================================
   HOME (index.php)
   ========================================================================== */
.hero {
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 0 16px;
}

.hero-card {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(120%) blur(2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .20);
}

.hero-head {
    background: var(--navy);
    color: #fff;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0;
    font-size: clamp(18px, 2vw, 26px);
}

.hero-body {
    padding: 26px 22px 28px;
}

.hero-greet {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}

.hero-sub {
    color: #475569;
    margin-bottom: 22px;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0b2a4a0d;
    color: #0b2a4a;
    border: 1px solid #0b2a4a33;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 800;
    margin-bottom: 18px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width:768px) {
    .hero-body .actions .btn {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   LOGIN (usa .wrap .hero como panel informativo para no chocar con el HOME)
   ========================================================================== */
.wrap {
    max-width: 1100px;
    margin: 34px auto;
    padding: 0 16px;
}

.wrap-narrow {
    max-width: 900px;
}

/* para add.php, si quieres */

.wrap .hero {
    background: rgba(255, 255, 255, .14);
    border: 1px dashed rgba(255, 255, 255, .35);
    border-radius: 18px;
    color: #fff;
    padding: 24px;
    box-shadow: inset 0 10px 30px rgba(0, 0, 0, .12);
}

.wrap .hero h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

.wrap .hero p {
    margin: 0;
    color: #fff;
    opacity: .9;
}

/* ==========================================================================
   LISTADO (view.php) – tabla
   ========================================================================== */
.table-shell {
    max-height: 68vh;
    overflow: auto;
}

.table-luxe {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.table-luxe thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #113455, var(--navy)) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 1rem 1.15rem;
}

.table-luxe tbody td {
    padding: 1rem 1.15rem;
    vertical-align: middle;
    border-top: 1px solid rgba(0, 0, 0, .04);
}

.table-luxe tbody tr:nth-child(even) {
    background: var(--table-odd);
}

.table-luxe tbody tr:nth-child(odd) {
    background: var(--table-even);
}

.table-luxe tbody tr:hover {
    background: var(--hover);
    box-shadow: inset 4px 0 0 var(--orange);
}

.id-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: #0f2a47;
    white-space: nowrap;
}

.name-cell {
    font-weight: 700;
    color: var(--ink);
}

.cell-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #0f2a47;
}

/* Badges combustible */
.badge-fuel {
    display: inline-block;
    padding: .45rem .7rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid transparent;
}

.badge-super {
    background: #ffefe6;
    color: #b24a13;
    border-color: #ffd8c4;
}

.badge-regular {
    background: #e8f5ff;
    color: #0b4a6b;
    border-color: #cfeaff;
}

.badge-diesel {
    background: #eef0f5;
    color: #273142;
    border-color: #d8dde6;
}

.badge-other {
    background: #f2f2f2;
    color: #374151;
}

/* Tabla mobile (stacked) */
@media (max-width:768px) {
    .table-luxe thead {
        display: none;
    }

    .table-luxe tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
        padding: 12px;
        border-bottom: 10px solid rgba(0, 0, 0, .05);
    }

    .table-luxe td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .35rem .25rem !important;
        border: 0 !important;
        background: transparent !important;
    }

    .table-luxe td::before {
        content: attr(data-label);
        color: var(--muted);
        font-weight: 700;
        margin-right: 10px;
    }

    .cell-money {
        text-align: right;
    }
}

/* Paginación */
.pagination .page-link {
    color: var(--navy);
    border-color: rgba(0, 0, 0, .1);
}

.pagination .page-item.active .page-link {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(11, 42, 74, .25);
}

/* ==========================================================================
   TABLERO (sorteo/index.php) – scoping para no interferir
   ========================================================================== */
.sorteo {
    color: #fff;
    background: var(--orange);
}

/* Topbar tablero */
.sorteo .topbar {
    background: #fff;
    color: var(--navy);
    padding: 14px 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: clamp(18px, 2.2vw, 34px);
    border-bottom: 4px solid rgba(0, 0, 0, .06);
}

.sorteo .topbar .logo {
    height: 80px;
}

.sorteo .topbar .title {
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 900;
}

.sorteo .stage {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero tablero */
.sorteo .hero {
    display: grid;
    place-items: center;
    min-height: 50vh;
    text-align: center;
}

.sorteo .hero .label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3vw, 50px);
    letter-spacing: .06em;
}

.sorteo .hero .number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(200px, 32vw, 600px);
    line-height: 1;
    text-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

/* Ganador anterior (bar) */
.sorteo .winner-wrap {
    display: flex;
    justify-content: center;
    margin: 14px 0 22px;
}

.sorteo .winner-bar {
    width: min(980px, 92vw);
    background: var(--navy);
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    border: 2px solid rgba(0, 0, 0, .12);
}

.sorteo .winner-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-style: italic;
    font-size: clamp(14px, 1.3vw, 22px);
    white-space: nowrap;
    color: var(--accent);
}

.sorteo .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.sorteo .chip {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    font-weight: 700;
    font-size: 15px;
    color: var(--accent);
}

/* Tabla tablero */
.sorteo .table-wrap {
    max-width: 980px;
    margin: 0 auto 40px;
    background: rgba(0, 0, 0, .08);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.sorteo table {
    width: 100%;
    border-collapse: collapse;
}

.sorteo thead {
    background: rgba(0, 0, 0, .25);
}

.sorteo thead th {
    color: #fff;
    text-transform: none;
    font-weight: 800;
    letter-spacing: .02em;
}

.sorteo th,
.sorteo td {
    padding: 10px 14px;
    text-align: center;
}

.sorteo tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, .09);
}

.sorteo tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, .04);
}

/* FX Layer (globos + confeti) */
.sorteo #fxLayer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Globos */
@keyframes riseBalloon {
    to {
        transform: translateY(-140vh) translateX(var(--drift, 0));
        opacity: 1;
    }
}

@keyframes swayBalloon {

    0%,
    100% {
        transform-origin: 50% 100%;
    }

    50% {
        transform: translateX(6px) rotate(2deg);
    }
}

.sorteo .fx-balloon {
    position: absolute;
    bottom: -160px;
    width: 34px;
    height: 48px;
    border-radius: 34px 34px 28px 28px;
    transform: translateY(0) translateX(0) rotate(0deg);
    box-shadow: inset -6px -10px 0 rgba(0, 0, 0, .12);
    animation: riseBalloon var(--rise, 7s) ease-in forwards, swayBalloon 2.8s ease-in-out infinite;
}

.sorteo .fx-balloon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 48px;
    width: 2px;
    height: 46px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .7);
    border-radius: 2px;
}

/* Confeti */
@keyframes fallConfetti {
    to {
        transform: translateY(120vh) translateX(var(--wind, 0)) rotate(360deg);
        opacity: 1;
    }
}

@keyframes spinConfetti {
    50% {
        transform: translateY(var(--y, 0)) rotate(180deg);
    }
}

.sorteo .fx-confetti {
    position: absolute;
    top: -40px;
    width: 10px;
    height: 16px;
    opacity: .95;
    transform: translateY(0) rotate(0deg);
    animation: fallConfetti var(--fall, 2600ms) linear forwards, spinConfetti 900ms linear infinite;
    will-change: transform;
}

/* Modal ganador */
.sorteo .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
}

.sorteo .modal-backdrop.show {
    display: flex;
}

.sorteo .modal-card {
    background: #0b2a4a;
    color: #fff;
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, .15);
    width: min(920px, 92vw);
    padding: 24px 22px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
    text-align: center;
}

.sorteo .modal-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-style: italic;
    color: var(--accent);
    font-size: clamp(20px, 3vw, 42px);
    margin-bottom: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.sorteo .modal-header img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.sorteo .modal-body {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.sorteo .modal-chip {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    font-weight: 800;
    font-size: clamp(16px, 2vw, 22px);
    color: var(--accent);
}


.sorteo .medal img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Evitar el margen de la página de inicio cuando estamos en login */
.page-login .hero {
    margin: 0;
}