/* M&R Racing Dog — "ticket stub" theme overlay for the legacy Cashier UI.
   Loaded last, after every vendor stylesheet. Colors/typography/borders only —
   never touches layout (width/height/display/position) so the SmartAdmin/
   Bootstrap 3 markup keeps working exactly as before.

   v6 "glass + flat, banking-app red/white": same glassmorphism + flat mix as
   v4, cool neutral grays instead of pink-tinted whites so red reads as a
   precise accent rather than an ambient wash (Revolut/N26 light mode, not
   candy) — and the red itself is now the exact vivid #C41E3A/#8B1220 pair
   used on the ticket-scan result page (backend/routers/public_ticket.py),
   not a muted brick tone, so the brand red matches across both surfaces.

   Still untouched on purpose: .btn-success (print/add = green), .btn-danger
   (clear/cancel = red-native) and .btn-warning everywhere, including the
   #events_list race-countdown pill — those are read by color, not by label,
   so they keep their original Bootstrap colors across every version of
   this theme.

   Palette + rules: ../../../../../../../estilo visual para caja.md (repo root)

   THIS FILE IS THE SOURCE OF TRUTH — it was hand-tuned across many rounds of
   visual review directly in the browser. If you are regenerating this file
   from the style guide instead of reading this exact file, stop: the guide
   documents the general system, but the specific values here (gradient
   stops, contrast fixes for the header icons, the independent selection
   color, the header's dark-pastel left edge) were arrived at empirically and
   are not fully re-derivable from the guide text alone. */

:root{
  --mr-ink:#12161C;
  --mr-muted:#6B7280;
  --mr-line:rgba(15,23,42,.08);
  --mr-border:#E2E4E9;

  /* exact match to the ticket-scan result page's --red/--red-dark */
  --mr-red:#a91d34;
  --mr-red-dark:#8B1220;
  --mr-red-pastel:#210A0E;
  --mr-red-tint:#F4EDEE;

  --mr-glass-sheen:linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 40%);
  /* mostly the vivid ticket-page red, only darkening at the tail for depth —
     a 50/50 blend read as a muddy rose instead of "the red from the ticket" */
  --mr-red-gradient:linear-gradient(135deg, var(--mr-red) 0%, var(--mr-red) 60%, var(--mr-red-dark) 100%);
  /* header masthead: dark pastel on the left (behind the coin), vivid through
     the middle, deepening again on the right — no light/washed-out end */
  --mr-glass-red:linear-gradient(100deg, var(--mr-red-pastel) 0%, var(--mr-red) 38%, var(--mr-red) 70%, var(--mr-red-dark) 100%);
  --mr-glass-white:linear-gradient(160deg, rgba(255,255,255,.85), rgba(244,245,247,.65));
  --mr-flat-card:linear-gradient(90deg, #F4F5F7 0%, #FFFFFF 100%);

  /* number/odds selection — independent of the header red, on purpose */
  --mr-select-bg:#12161C;
  --mr-select-border:#1d242a;
  --mr-select-text:#F5F6F8;

  --mr-blur:blur(18px) saturate(140%);
}

html, body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
}

/* numeric/money fields read like a tote board */
#receipt_sum_total,
#race8_fast_select_input,
#short_report_balance_amount,
.roulette_template_calc_total,
#roulette_template_calc_total,
#roulette_template_calc_caption{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace!important;
}

/* ---------- neutral backdrop the glass panels blur against ---------- */
body{
  background:
    radial-gradient(circle at 88% 92%, rgba(196,30,58,.10), transparent 45%),
    linear-gradient(160deg, #F7F8FA 0%, #FFFFFF 55%)!important;
  background-attachment:fixed!important;
}

/* ---------- chrome: header / sidebar / footer (glass) ---------- */
#header{
  background:var(--mr-glass-red)!important;
  -webkit-backdrop-filter:var(--mr-blur)!important;
  backdrop-filter:var(--mr-blur)!important;
  border-bottom:1px solid rgba(255,255,255,.25)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.12)!important;
  position:relative;
}
#header .project-context .label,
#header #index_label_balance{ color:#fff!important; }
#header #short_report_balance_amount{ color:#fff!important; font-weight:800!important; }
#header .badge{ background:var(--mr-ink)!important; }

/* right-side header icons (fullscreen/logout/collapse-menu) sit inside a
   vendor light-gray chip (#f8f8f8) — white icons on that were invisible on
   a light chip; give the chip its own frosted-glass treatment instead */
#header .btn-header a{
  background:rgba(255,255,255,.16)!important;
  background-image:none!important;
  border:1px solid rgba(255,255,255,.3)!important;
  color:#fff!important;
  box-shadow:none!important;
}
#header .btn-header a:hover{
  background:rgba(255,255,255,.3)!important;
  color:#fff!important;
}

/* brand mark (M&R Racing Dog coin) replacing the old wide wordmark image —
   vendor CSS assumes a ~130px-wide rectangle, so it needs a hard reset.
   #logo-group has a hardcoded width:169px!important in the vendor sheet;
   widen it or the wordmark text overlaps the BALANCE label next to it. */
#logo-group{ width:auto!important; white-space:nowrap!important; }
#logo{
  display:flex!important;
  align-items:center!important;
  width:auto!important;
  height:100%!important;
  margin:0 20px 0 20px!important;
  gap:10px!important;
}
#logo img{
  width:38px!important;
  height:38px!important;
  padding-left:0!important;
  border-radius:50%!important;
  object-fit:cover!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.4), 0 2px 8px rgba(0,0,0,.25)!important;
  flex:none!important;
}
#logo .mr-wordmark{
  display:flex!important;
  flex-direction:column!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#logo .mr-wordmark strong{
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.32em!important;
  color:rgba(255,255,255,.7)!important;
  text-transform:uppercase!important;
}
#logo .mr-wordmark em{
  font-style:normal!important;
  font-size:17px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
  color:#fff!important;
  margin-top:2px!important;
}
#activity{ margin:10px 0 0 20px!important; }

#left-panel{
  background:var(--mr-glass-white)!important;
  -webkit-backdrop-filter:var(--mr-blur)!important;
  backdrop-filter:var(--mr-blur)!important;
  border-right:1px solid rgba(255,255,255,.6)!important;
}
#left-panel .login-info a span{ color:var(--mr-ink)!important; }
#left-panel nav > ul > li > a{ color:var(--mr-muted)!important; border-left-color:transparent!important; }
#left-panel nav > ul > li:hover > a,
#left-panel nav > ul > li.active > a{
  color:var(--mr-red-dark)!important;
  border-left:3px solid var(--mr-red)!important;
  background:linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.15))!important;
}

.page-footer{
  background:var(--mr-glass-white)!important;
  -webkit-backdrop-filter:var(--mr-blur)!important;
  backdrop-filter:var(--mr-blur)!important;
  color:var(--mr-ink)!important;
  border-top:1px solid rgba(255,255,255,.6)!important;
}
.page-footer a{ color:var(--mr-red-dark)!important; }
/* the legacy markup hardcodes .txt-color-white on these spans for the old
   dark footer — force ink now that the footer is a light glass bar */
.page-footer .txt-color-white,
.page-footer .txt-color-white *{ color:var(--mr-ink)!important; }

#ribbon{ background:rgba(255,255,255,.6)!important; border-bottom:1px solid var(--mr-line)!important; }
#ribbon .breadcrumb{ background:transparent!important; color:var(--mr-ink)!important; }

/* ---------- surfaces ---------- */
.well{
  background:rgba(255,255,255,.75)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
  border:1px solid rgba(255,255,255,.85)!important;
  border-radius:10px!important;
  box-shadow:0 4px 18px rgba(15,23,42,.06)!important;
}

.jarviswidget{ border-radius:10px!important; overflow:hidden!important; }
/* card headers stay flat (not glass) — the "mixed with flat design" half */
.jarviswidget > header,
.jarviswidget > div > header{
  background:var(--mr-flat-card)!important;
  border-bottom:2px solid var(--mr-red)!important;
}
.jarviswidget > header, .jarviswidget > header *,
.jarviswidget > div > header, .jarviswidget > div > header *{
  color:var(--mr-ink)!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}
.nav-tabs > li > a{ color:var(--mr-muted)!important; text-transform:none!important; letter-spacing:normal!important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
  color:var(--mr-red)!important;
  border-bottom:2px solid var(--mr-red)!important;
  background:transparent!important;
}

/* ticket/receipt side panel — glass, flipped from the old dark variant */
.jarviswidget-color-darken > div{
  background:var(--mr-glass-white)!important;
  -webkit-backdrop-filter:var(--mr-blur)!important;
  backdrop-filter:var(--mr-blur)!important;
}
.jarviswidget-color-darken .bet-box{ background:rgba(255,255,255,.5)!important; }
#bets_list, #bets_list *{ color:var(--mr-ink)!important; }
#bets_list i{ color:var(--mr-red)!important; }

.modal-content{
  background:var(--mr-glass-white)!important;
  -webkit-backdrop-filter:var(--mr-blur)!important;
  backdrop-filter:var(--mr-blur)!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.7)!important;
}
.modal-header{ border-bottom:2px solid var(--mr-red)!important; }
.modal-footer{ border-top:1px solid var(--mr-line)!important; }

/* ---------- buttons ---------- */
/* Only the single primary CTA (login / confirm) takes the brand red.
   Success/danger/warning keep their native colors on purpose — see note above. */
.btn.sa-btn-primary,
.btn-primary{
  background:var(--mr-glass-sheen), var(--mr-red-gradient)!important;
  border-color:var(--mr-red-dark)!important;
  color:#fff!important;
  box-shadow:0 4px 16px rgba(139,18,32,.28)!important;
}
.btn.sa-btn-primary:hover,
.btn-primary:hover{ background:var(--mr-red)!important; }

.btn-default{
  background:rgba(255,255,255,.9)!important;
  background-image:none!important;
  border-color:var(--mr-border)!important;
  color:var(--mr-ink)!important;
  border-radius:8px!important;
}
.btn-default:hover{ border-color:var(--mr-red)!important; color:var(--mr-red)!important; }
.btn-default.active{
  background:var(--mr-red-gradient)!important;
  border-color:var(--mr-red-dark)!important;
  color:#fff!important;
}

/* odds grid stays flat (dense repeated buttons — no blur, per the brief) */
.roulette-btn-base{
  background:#fff!important;
  background-image:none!important;
  border:1px solid var(--mr-border)!important;
  color:var(--mr-ink)!important;
  border-radius:6px!important;
}
.roulette-btn-base:hover{ border-color:var(--mr-red)!important; }
.roulette-btn-base.selected,
.roulette-btn-base.selected:hover{
  background:var(--mr-select-bg)!important;
  border-color:var(--mr-select-border)!important;
  color:var(--mr-select-text)!important;
  text-shadow:none!important;
}

.btn-black{
  background:linear-gradient(160deg, #2E333B, #12161C)!important;
  background-image:linear-gradient(160deg, #2E333B, #12161C)!important;
  border-color:#12161C!important;
  color:#fff!important;
  border-radius:6px!important;
}
.btn-black.active,
.btn-black:hover,
.btn-black[disabled]{ background:var(--mr-red)!important; background-image:var(--mr-red-gradient)!important; }

/* race/event picker pill (the countdown-to-race button) stays its native
   Bootstrap .btn-warning amber — reverted per request, not re-themed */

/* toggle switches ("Dividir la apuesta", "WINNER" on/off, etc.) */
.onoffswitch-inner:before{ background-color:var(--mr-red)!important; }

.badge{ background:var(--mr-red)!important; }

/* form focus rings */
.form-control:focus,
input:focus,
textarea:focus{
  border-color:var(--mr-red)!important;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.04), 0 0 0 2px rgba(196,30,58,.14)!important;
}

/* search numpad popover — glass frame, flat keys inside */
#search-numpad{
  background:var(--mr-glass-white)!important;
  -webkit-backdrop-filter:var(--mr-blur)!important;
  backdrop-filter:var(--mr-blur)!important;
  border-color:rgba(255,255,255,.7)!important;
  box-shadow:0 12px 32px rgba(15,23,42,.16)!important;
}

/* ---------- login page ---------- */
body.publicHeader-active{
  background:
    radial-gradient(circle at 85% 85%, rgba(196,30,58,.12), transparent 45%),
    linear-gradient(160deg, #F7F8FA 0%, #FFFFFF 60%)!important;
}
body.publicHeader-active::before{
  content:"";
  position:fixed; top:0; left:0; right:0; height:3px; z-index:20;
  background:linear-gradient(90deg, transparent, var(--mr-red), transparent);
}
body.publicHeader-active .well.no-padding{
  background:rgba(255,255,255,.68)!important;
  -webkit-backdrop-filter:var(--mr-blur)!important;
  backdrop-filter:var(--mr-blur)!important;
  border:1px solid rgba(255,255,255,.85)!important;
  border-radius:16px!important;
  box-shadow:0 24px 60px -20px rgba(15,23,42,.22)!important;
  overflow:hidden!important;
}
body.publicHeader-active .smart-form > header{
  background:var(--mr-glass-sheen), var(--mr-glass-red)!important;
  color:#fff!important;
  text-transform:uppercase!important;
  letter-spacing:.1em!important;
  font-weight:800!important;
  padding:18px 20px!important;
}
body.publicHeader-active .smart-form > fieldset{ background:transparent!important; }
body.publicHeader-active .smart-form > footer{
  background:transparent!important;
  border-top:1px solid var(--mr-line)!important;
  padding:14px 20px 20px!important;
}
body.publicHeader-active .btn.sa-btn-primary{
  width:100%!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  font-weight:800!important;
  border-radius:8px!important;
}
body.publicHeader-active img.loginform-flag.selected{
  box-shadow:0 0 0 2px var(--mr-red)!important;
}
body.publicHeader-active .help-block.has-error{ color:var(--mr-red-dark)!important; font-weight:700!important; }