/* ============================================
   assets/css/main.css
   Estilos globales del Casino Online
   Paleta: verde fieltro, negro carbón, oro
   ============================================ */

/* ─── Variables ─── */
:root {
    --green-felt:   #1a4a2e;
    --green-dark:   #0f2d1c;
    --green-light:  #2a6b42;
    --green-bright: #3d9b5e;
    --gold:         #c9a84c;
    --gold-light:   #e8c96a;
    --gold-dark:    #9b7d30;
    --black:        #0a0a0a;
    --charcoal:     #141414;
    --card-bg:      #1c1c1c;
    --card-border:  #2e2e2e;
    --white:        #f0ece0;
    --white-muted:  #a89f8c;
    --red-suit:     #c0392b;
    --radius-sm:    6px;
    --radius:       12px;
    --radius-lg:    20px;
    --shadow:       0 4px 24px rgba(0,0,0,0.5);
    --shadow-card:  0 8px 32px rgba(0,0,0,0.7);
    --font-display: 'Playfair Display', serif;
    --font-body:    'Inter', sans-serif;
    --transition:   all .2s ease;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--black);
    color: var(--white);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

/* ─── Navbar ─── */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 64px;
    background: rgba(10,10,10,0.95);
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
}

.navbar__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.navbar__suit {
    font-size: 1.5rem;
    color: var(--gold);
}

.navbar__name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--gold);
    letter-spacing: .05em;
}

.navbar__center {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    letter-spacing: .04em;
}

.navbar__user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar__username {
    color: var(--white-muted);
    font-size: .9rem;
}

.navbar__username strong {
    color: var(--white);
}

.navbar__balance {
    background: rgba(201,168,76,.12);
    border: 1px solid rgba(201,168,76,.3);
    color: var(--gold);
    padding: .3rem .85rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: .9rem;
}

.navbar__back {
    color: var(--white-muted);
    font-size: .9rem;
    transition: var(--transition);
}
.navbar__back:hover { color: var(--gold); }

/* ─── Botones ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.4rem;
    border-radius: var(--radius-sm);
    border: none;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: .03em;
    white-space: nowrap;
}

.btn--primary {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: var(--black);
}
.btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(201,168,76,.4);
}
.btn--primary:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

.btn--ghost {
    background: transparent;
    color: var(--white-muted);
    border: 1px solid var(--card-border);
}
.btn--ghost:hover {
    border-color: var(--white-muted);
    color: var(--white);
}

.btn--action {
    background: var(--green-light);
    color: var(--white);
    padding: .75rem 1.8rem;
    font-size: 1rem;
    border-radius: var(--radius);
}
.btn--action:hover {
    background: var(--green-bright);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(61,155,94,.35);
}

.btn--double {
    background: rgba(192,57,43,.7);
    border: 1px solid rgba(192,57,43,.5);
}
.btn--double:hover {
    background: rgba(192,57,43,.95);
    box-shadow: 0 4px 16px rgba(192,57,43,.3);
}

.btn--sm  { padding: .35rem .85rem; font-size: .8rem; }
.btn--lg  { padding: .85rem 2.4rem; font-size: 1.05rem; border-radius: var(--radius); }
.btn--full { width: 100%; }

/* ─── Alertas ─── */
.alert {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    margin-bottom: 1.25rem;
}

.alert--error {
    background: rgba(192,57,43,.15);
    border: 1px solid rgba(192,57,43,.4);
    color: #e88;
}

.alert--success {
    background: rgba(61,155,94,.12);
    border: 1px solid rgba(61,155,94,.35);
    color: #7d9;
}

.alert__icon { font-size: 1rem; }

/* ─── Formularios ─── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
    display: block;
    font-size: .85rem;
    color: var(--white-muted);
    margin-bottom: .45rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.form-input {
    width: 100%;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
    outline: none;
}
.form-input:focus {
    border-color: var(--gold);
    background: rgba(201,168,76,.06);
    box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}
.form-input::placeholder { color: rgba(168,159,140,.4); }

.input-wrapper { position: relative; }
.input-wrapper .form-input { padding-right: 3rem; }

.toggle-pass {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: .5;
    transition: var(--transition);
    padding: .2rem;
}
.toggle-pass:hover { opacity: 1; }

/* ─── LOGIN PAGE ─── */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 30% 40%, rgba(26,74,46,.6) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 60%, rgba(9,45,28,.5) 0%, transparent 55%),
                var(--black);
}

.login-bg__pattern {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(201,168,76,.03) 0px,
        rgba(201,168,76,.03) 1px,
        transparent 1px,
        transparent 40px
    );
}

.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
}

.login-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-card);
}

.login-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-brand__suit {
    font-size: 3rem;
    display: block;
    margin-bottom: .25rem;
    filter: drop-shadow(0 0 12px rgba(201,168,76,.5));
    color: var(--gold);
}

.login-brand__name {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    letter-spacing: .05em;
    line-height: 1;
}

.login-brand__sub {
    color: var(--white-muted);
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-top: .35rem;
}

.login-footer {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--white-muted);
    font-size: .8rem;
    line-height: 1.8;
}

.login-footer__demo {
    margin-top: .5rem;
    opacity: .6;
}

.login-footer__demo code {
    background: rgba(255,255,255,.08);
    padding: .1rem .4rem;
    border-radius: 3px;
    font-size: .78rem;
    color: var(--gold);
}

/* ─── DASHBOARD ─── */
.dashboard-page { background: var(--charcoal); }

.dashboard-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.balance-hero {
    text-align: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg, var(--green-dark), rgba(26,74,46,.4));
    border: 1px solid rgba(201,168,76,.2);
    border-radius: var(--radius-lg);
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}

.balance-hero::before {
    content: '♠ ♥ ♦ ♣';
    position: absolute;
    font-size: 5rem;
    opacity: .04;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 1.5rem;
    white-space: nowrap;
    pointer-events: none;
}

.balance-hero__label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--white-muted);
    margin-bottom: .5rem;
}

.balance-hero__amount {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--gold);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 40px rgba(201,168,76,.3);
}

.balance-hero__sub {
    color: var(--white-muted);
    font-size: .85rem;
    margin-top: .6rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 1.25rem;
    letter-spacing: .04em;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--card-border);
}

.games-section { margin-bottom: 2.5rem; }

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.game-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    position: relative;
    transition: var(--transition);
    display: block;
    cursor: pointer;
}

.game-card--active {
    border-color: rgba(201,168,76,.35);
    background: linear-gradient(145deg, var(--card-bg), rgba(26,74,46,.2));
}

.game-card--active:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(201,168,76,.15);
    border-color: var(--gold);
}

.game-card--locked {
    opacity: .45;
    cursor: not-allowed;
}

.game-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(61,155,94,.2);
    border: 1px solid rgba(61,155,94,.4);
    color: #7d9;
    font-size: .72rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.game-card__badge--soon {
    background: rgba(201,168,76,.12);
    border-color: rgba(201,168,76,.3);
    color: var(--gold);
}

.game-card__icon {
    font-size: 2.8rem;
    margin-bottom: .85rem;
    display: block;
}

.game-card__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--white);
    margin-bottom: .35rem;
}

.game-card__desc {
    color: var(--white-muted);
    font-size: .85rem;
    margin-bottom: .85rem;
}

.game-card__meta {
    display: flex;
    gap: 1rem;
    font-size: .78rem;
    color: var(--white-muted);
    margin-bottom: 1rem;
    padding: .6rem .75rem;
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-sm);
}

.game-card__cta {
    color: var(--gold);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.game-card__cta--locked { color: var(--white-muted); }

/* ─── Historial ─── */
.history-section {}

.history-empty {
    text-align: center;
    padding: 3rem;
    color: var(--white-muted);
    border: 1px dashed var(--card-border);
    border-radius: var(--radius);
}

.history-empty span { font-size: 2.5rem; display: block; margin-bottom: .75rem; }

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.history-table th {
    text-align: left;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.04);
    color: var(--white-muted);
    font-weight: 500;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--card-border);
}

.history-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.history-row:hover td { background: rgba(255,255,255,.02); }

.result-badge {
    padding: .2rem .65rem;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
}

.result-badge--victoria  { background: rgba(61,155,94,.15);  color: #7d9; border: 1px solid rgba(61,155,94,.3); }
.result-badge--derrota   { background: rgba(192,57,43,.15);  color: #e88; border: 1px solid rgba(192,57,43,.3); }
.result-badge--empate    { background: rgba(168,159,140,.12);color: var(--white-muted); border: 1px solid rgba(168,159,140,.2); }
.result-badge--blackjack { background: rgba(201,168,76,.15); color: var(--gold); border: 1px solid rgba(201,168,76,.3); }

.text-win  { color: #7d9; font-weight: 600; }
.text-loss { color: #e88; font-weight: 600; }

/* ─── Footer ─── */
.site-footer {
    text-align: center;
    padding: 2rem;
    color: rgba(168,159,140,.3);
    font-size: .78rem;
    border-top: 1px solid var(--card-border);
    margin-top: 3rem;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
    .navbar__center { display: none; }
    .navbar { padding: 0 1rem; }
    .balance-hero__amount { font-size: 2.8rem; }
    .dashboard-main { padding: 1.5rem 1rem; }
    .games-grid { grid-template-columns: 1fr; }
    .history-table th:last-child,
    .history-table td:last-child { display: none; }
}