:root {
  color-scheme:dark;
  --bg:#030f19;
  --line:#29455b;
  --gold:#e7b947;
  --muted:#a0bbd8;
  --green:#38e883;
  --font:'Arial Narrow','Bahnschrift','Segoe UI',Arial,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:radial-gradient(ellipse at 45% -35%,#10314a,transparent 65%),var(--bg);
  color:#f5f8fb;
  font-family:var(--font);
  font-size:16px
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  transition:background .15s,border-color .15s
}
button:disabled {
  cursor:not-allowed;
  opacity:.43
}
button:focus-visible,input:focus-visible {
  outline:3px solid #7ec9ff;
  outline-offset:3px
}
[hidden] {
  display:none!important
}
h1,h2,p {
  margin:0
}
h1 {
  font-size:clamp(28px,2.55vw,43px);
  letter-spacing:-1.2px;
  line-height:1.1
}
h2 {
  font-size:clamp(23px,2vw,32px);
  letter-spacing:-.6px;
  line-height:1.14
}
.bingo-app {
  max-width:1920px;
  margin:0 auto;
  padding:25px 18px 0;
  min-height:100dvh;
  display:flex;
  flex-direction:column
}
.page-heading {
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:23px
}
.page-heading p {
  color:var(--muted);
  font-size:clamp(15px,1.3vw,21px)
}
.workspace {
  display:grid;
  grid-template-columns:minmax(285px,1fr) minmax(420px,1.34fr) minmax(300px,1.03fr);
  gap:12px;
  flex:1;
  min-height:0
}
.panel {
  border:1px solid #b1832d;
  border-radius:12px;
  padding:18px;
  background:linear-gradient(145deg,#061826e6,#020d17f5);
  box-shadow:0 8px 28px #0003;
  min-width:0
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:15px
}
.icon-button {
  border:1px solid var(--line);
  background:#091c2c;
  color:var(--muted);
  border-radius:8px;
  width:33px;
  height:33px;
  font-size:24px
}
.draws-panel {
  display:flex;
  flex-direction:column
}
.filters {
  display:flex;
  gap:8px;
  margin-bottom:13px
}
.filters button,.quick-quantities button {
  flex:1;
  background:linear-gradient(#10263a,#06131f);
  border:1px solid #35536b;
  color:var(--muted);
  min-height:41px;
  border-radius:10px
}
.filters [aria-pressed=true],.quick-quantities [aria-pressed=true] {
  background:linear-gradient(#ffdd7c,#d3a333);
  border:1px solid #ffe49b;
  color:#151a1b;
  font-weight:750;
  box-shadow:inset 0 1px #fff6
}
.date-filter {
  position:relative;
  display:flex;
  align-items:center;
  min-height:46px;
  border:1px solid var(--line);
  border-radius:9px;
  margin-bottom:15px;
  padding:0 12px;
  gap:8px;
  background:#04121e
}
.date-filter label {
  display:flex;
  gap:12px;
  align-items:center;
  color:var(--muted);
  white-space:nowrap;
  font-size:15px;
  pointer-events:none
}
.date-filter label>span:first-child {
  font-size:25px
}
.date-filter input {
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  cursor:pointer
}
.date-filter button {
  z-index:1;
  margin-left:auto;
  border:0;
  background:#19364c;
  color:#fff;
  border-radius:4px;
  width:24px;
  height:24px
}
.draw-list {
  display:flex;
  flex-direction:column;
  gap:11px;
  flex:1;
  overflow:auto;
  min-height:230px
}
.draw-card {
  width:100%;
  text-align:left;
  display:grid;
  grid-template-columns:61px 1fr auto;
  align-items:center;
  gap:12px;
  border:1px solid #2c4960;
  border-radius:10px;
  padding:15px 12px;
  background:linear-gradient(120deg,#0b2132,#03111c);
  color:#f5f8fb;
  min-height:108px
}
.draw-card:hover {
  border-color:#bd9850
}
.draw-card[aria-pressed=true] {
  border:2px solid var(--green);
  padding:14px 11px;
  box-shadow:inset 0 0 15px #13cb4922,0 0 8px #19ff4730
}
.draw-card.closed {
  opacity:.53
}
.ball {
  --ball:#008c5a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  flex-shrink:0;
  border-radius:50%;
  border:2px solid #e1b951;
  box-shadow:inset 0 0 0 2px #0c2536,inset 0 0 0 4px #fff7,0 2px 6px #0009;
  background:radial-gradient(ellipse at 28% 17%,#f6ffff 0%,#f6ffff99 7%,transparent 27%),radial-gradient(circle at 40% 40%,var(--ball),#001017 83%)
}
.ball>span {
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(#fffff1,#e4e2d4);
  color:#071419;
  font-weight:850;
  font-size:23px;
  box-shadow:0 1px 4px #0008
}
.ball.special {
  --ball:#ec9e08
}
.ball.future {
  --ball:#1564e4
}
.ball.regular {
  --ball:#c72426
}
.draw-card-name {
  display:block;
  font-size:18px;
  font-weight:750;
  line-height:1.15;
  margin:5px 0
}
.draw-code {
  display:block;
  color:var(--muted);
  font-size:13px;
  margin:3px 0
}
.draw-card-date {
  display:block;
  color:#bad0e7;
  font-size:12px;
  line-height:1.45
}
.draw-card-price {
  text-align:right;
  font-size:22px;
  font-weight:750;
  white-space:nowrap
}
.draw-card-price small {
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  margin-top:3px
}
.badge {
  display:inline-block;
  border:1px solid #39835b;
  color:var(--green);
  background:#003c29aa;
  border-radius:12px;
  padding:2px 9px;
  font-size:11px;
  font-weight:750;
  line-height:1.25;
  letter-spacing:.25px;
  white-space:nowrap
}
.badge.future {
  border-color:#168bf1;
  color:#63c1ff;
  background:#073559
}
.badge.special {
  border-color:#b79541;
  color:#ffdc76;
  background:#54401477
}
.badge.closed {
  border-color:#775056;
  color:#ffa1a1;
  background:#3c1521
}
.calendar-button {
  margin-top:13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.secondary {
  background:linear-gradient(#102334,#071522);
  color:var(--muted);
  border:1px solid #40586d;
  border-radius:9px;
  padding:12px 14px
}
.primary {
  background:linear-gradient(120deg,#f8d46e,#f2c65a 50%,#cb982f);
  border:1px solid #ffe69f;
  color:#10191d;
  border-radius:9px;
  box-shadow:inset 0 1px #ffffb350;
  font-weight:800
}
.primary:hover:not(:disabled) {
  background:linear-gradient(#ffe395,#eab643)
}
.purchase-panel {
  display:flex;
  flex-direction:column;
  padding:23px 20px
}
.draw-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  min-height:82px
}
.draw-heading h2 {
  font-size:clamp(23px,2.1vw,33px)
}
.draw-meta {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  color:var(--muted);
  font-size:15px
}
.countdown {
  border:1px solid var(--line);
  border-radius:9px;
  text-align:center;
  padding:9px 12px;
  min-width:113px;
  flex-shrink:0
}
.countdown span {
  font-size:12px;
  color:var(--muted);
  display:block
}
.countdown strong {
  display:block;
  font-size:28px;
  color:var(--green);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  margin-top:3px
}
.countdown.ended strong {
  color:#ff8787;
  font-size:19px
}
.price-and-prizes {
  display:flex;
  padding:18px 12px;
  border:1px solid #183245;
  border-radius:10px;
  gap:14px;
  margin-top:13px;
  margin-bottom:24px;
  align-items:center;
  min-height:116px
}
.eyebrow {
  display:block;
  color:#bdd0e5;
  font-size:11px;
  margin-bottom:8px
}
.fixed-price {
  flex:0 0 29%;
  border-right:1px solid #294253;
  padding-right:14px
}
.fixed-price strong {
  display:inline-block;
  padding:10px 12px;
  border:1px solid #29465d;
  border-radius:8px;
  background:#11283b;
  font-size:26px;
  white-space:nowrap
}
.prizes-wrap {
  flex:1;
  min-width:0
}
.prizes {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px
}
.prize {
  color:var(--green);
  border:1px solid currentColor;
  border-radius:5px;
  text-align:center;
  background:#00ab3612;
  padding:8px 3px;
  min-width:0
}
.prize span {
  display:block;
  font-size:9px;
  font-weight:750;
  margin-bottom:5px;
  white-space:nowrap
}
.prize strong {
  display:block;
  font-size:11px;
  color:#f4f7fa;
  white-space:nowrap
}
.prize.line {
  color:#27adff;
  background:#07599125
}
.prize.double {
  color:#ff6e72;
  background:#801c2125
}
.prize.bingo {
  color:#f4cd64;
  background:#89701525
}
.quantity-form {
  display:flex;
  flex:1;
  flex-direction:column
}
.quantity-label {
  font-size:25px;
  font-weight:750;
  letter-spacing:-.5px;
  margin:7px 0 22px
}
.stepper {
  display:grid;
  grid-template-columns:85px minmax(0,1fr) 85px;
  gap:15px
}
.stepper button {
  height:87px;
  font-size:51px;
  font-weight:600;
  padding:0
}
.stepper input {
  text-align:center;
  width:100%;
  min-width:0;
  color:#fff;
  border:1px solid #56728a;
  border-radius:8px;
  background:#030f18;
  font-size:58px;
  font-weight:800;
  appearance:textfield;
  -moz-appearance:textfield
}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button {
  -webkit-appearance:none;
  margin:0
}
.quick-quantities {
  display:flex;
  gap:10px;
  margin-top:23px
}
.quick-quantities button {
  min-width:0;
  min-height:62px;
  color:#e6edf6;
  font-size:24px;
  font-weight:700
}
.quantity-help {
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin-top:13px
}
.field-error {
  color:#ffabad;
  font-size:13px;
  line-height:1.5;
  min-height:18px;
  margin-top:8px
}
.field-error:empty {
  min-height:0;
  margin:0
}
.subtotal {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid #dbb24b;
  border-radius:10px;
  padding:17px 15px;
  gap:10px;
  min-height:80px
}
.quantity-form .subtotal {
  margin-top:max(28px,4vh)
}
.subtotal span {
  font-size:18px;
  color:#c7d8e8
}
.subtotal strong {
  color:#ffdb79;
  font-size:38px;
  font-weight:850;
  white-space:nowrap
}
.add-button {
  font-size:21px;
  min-height:63px;
  margin-top:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px
}
.add-button>span {
  font-size:32px
}
.ticket-panel {
  display:flex;
  flex-direction:column
}
.counter {
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#0b2032;
  font-size:14px
}
.ticket-list {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:130px
}
.ticket-item {
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:12px;
  padding:20px 0;
  border-bottom:1px solid #274256;
  align-items:center
}
.ticket-item .ball {
  width:49px;
  height:49px
}
.ticket-item .ball>span {
  width:29px;
  height:29px;
  font-size:19px
}
.ticket-item h3 {
  font-size:17px;
  margin:4px 0 6px;
  overflow-wrap:anywhere;
  line-height:1.2
}
.ticket-item p {
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}
.ticket-item-side {
  display:flex;
  align-items:flex-end;
  flex-direction:column;
  gap:16px
}
.ticket-item-side>strong {
  font-size:24px;
  white-space:nowrap
}
.remove-item {
  border:0;
  padding:0;
  background:transparent;
  color:var(--muted);
  font-size:23px;
  width:30px;
  height:30px;
  line-height:1
}
.remove-item:hover {
  color:#ff999b
}
.ticket-item.stale {
  border-left:2px solid #ff8787;
  padding-left:8px
}
.ticket-bottom {
  padding-top:12px
}
.total-cards,.total {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.total-cards {
  background:#061a2a;
  border:1px solid #17364c;
  border-radius:7px;
  padding:9px 11px;
  color:var(--muted);
  font-size:16px
}
.total-cards strong {
  font-size:22px;
  color:#f3f5f7
}
.total {
  padding:8px 11px 14px;
  gap:8px
}
.total>span {
  font-weight:800;
  font-size:23px
}
.total>strong {
  color:#ffdc79;
  font-size:clamp(30px,2.75vw,44px);
  font-weight:850;
  white-space:nowrap
}
.sell-button {
  width:100%;
  min-height:58px;
  font-size:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px
}
.sell-button svg {
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:2
}
.clear-button {
  width:100%;
  min-height:44px;
  margin-top:9px;
  font-weight:650;
  font-size:14px
}
.clear-button span {
  font-size:22px;
  vertical-align:middle;
  margin-right:8px
}
.text-button {
  display:block;
  margin:12px auto 0;
  border:0;
  background:none;
  color:#ffe49a;
  text-decoration:underline;
  font-size:13px;
  padding:5px
}
.print-status {
  font-size:12px;
  text-align:center;
  color:var(--muted);
  margin-top:12px
}
.status-footer {
  display:flex;
  gap:23px;
  flex-wrap:wrap;
  justify-content:space-between;
  border-top:1px solid #203c4b;
  margin-top:16px;
  padding:10px 4px;
  color:var(--muted);
  font-size:11px
}
#demo-label {
  color:#ffd675
}
.notice {
  padding:12px 15px;
  background:#113129;
  border:1px solid #287458;
  border-radius:8px;
  margin-bottom:14px;
  color:#d0f5df;
  line-height:1.5;
  font-size:14px
}
.notice.error {
  background:#361a21;
  border-color:#8e4550;
  color:#ffd8da
}
.notice.warning {
  background:#352c1a;
  border-color:#8f723a;
  color:#ffe5a9
}
.empty-state {
  height:100%;
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:var(--muted);
  gap:12px;
  padding:25px;
  line-height:1.6;
  font-size:14px
}
.empty-state strong {
  font-size:19px;
  color:#dae5ef
}
.ticket-symbol {
  font-size:45px;
  color:#9d8248
}
.muted {
  color:var(--muted);
  font-size:12px
}
@media(min-width:1200px) and (min-height:820px) {
  .workspace {
    min-height:calc(100dvh - 132px)
  }
  .quantity-form .subtotal {
    margin-top:auto
  }
  .quantity-help {
    margin-bottom:25px
  }
  .draw-card {
    min-height:119px
  }
  .draw-list {
    max-height:calc(100dvh - 330px)
  }
  .ticket-list {
    max-height:calc(100dvh - 395px)
  }
}
@media(max-width:1320px) {
  .bingo-app {
    padding:18px 12px 0
  }
  .panel {
    padding:14px
  }
  .workspace {
    grid-template-columns:minmax(260px,1fr) minmax(350px,1.3fr) minmax(270px,1fr);
    gap:9px
  }
  .draw-card {
    grid-template-columns:45px 1fr;
    gap:10px;
    padding:12px
  }
  .draw-card[aria-pressed=true] {
    padding:11px
  }
  .draw-card .ball {
    width:45px;
    height:45px
  }
  .draw-card .ball>span {
    width:27px;
    height:27px;
    font-size:19px
  }
  .draw-card-price {
    grid-column:2;
    display:flex;
    gap:6px;
    align-items:baseline;
    font-size:19px;
    justify-self:start
  }
  .draw-card-price small {
    display:inline
  }
  .draw-heading {
    flex-wrap:wrap
  }
  .countdown {
    min-width:90px;
    margin-left:auto;
    padding:5px 9px
  }
  .countdown strong {
    font-size:23px
  }
  .price-and-prizes {
    gap:9px;
    padding:13px 9px
  }
  .fixed-price {
    flex-basis:26%;
    padding-right:8px
  }
  .fixed-price strong {
    font-size:21px;
    padding:9px 7px
  }
  .prize span {
    font-size:8px
  }
  .prize strong {
    font-size:10px
  }
  .stepper {
    grid-template-columns:65px minmax(0,1fr) 65px;
    gap:11px
  }
  .stepper button {
    height:77px
  }
  .stepper input {
    font-size:48px
  }
  .subtotal strong {
    font-size:30px
  }
  .subtotal span {
    font-size:15px
  }
  .ticket-item {
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px
  }
  .ticket-item>.ball {
    display:none
  }
  .ticket-item-side>strong {
    font-size:22px
  }
  .sell-button,.add-button {
    font-size:18px
  }
}
@media(max-width:980px) {
  .workspace {
    grid-template-columns:minmax(240px,.9fr) minmax(340px,1.2fr)
  }
  .ticket-panel {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .ticket-panel>.section-heading {
    grid-column:1/-1;
    margin-bottom:0
  }
  .ticket-list {
    max-height:360px
  }
  .ticket-bottom {
    padding:0
  }
  .page-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:9px
  }
  .draw-list {
    max-height:550px
  }
  .quantity-form .subtotal {
    margin-top:auto
  }
  .quantity-help {
    margin-bottom:24px
  }
  .status-footer {
    gap:9px
  }
}
@media(max-width:640px) {
  .bingo-app {
    padding:17px 10px 0
  }
  .workspace {
    grid-template-columns:1fr
  }
  .ticket-panel {
    grid-column:auto;
    display:flex;
    gap:0
  }
  .ticket-panel>.section-heading {
    margin-bottom:15px
  }
  .draw-list {
    max-height:340px;
    min-height:120px
  }
  .draw-card {
    grid-template-columns:45px 1fr auto
  }
  .draw-card-price {
    grid-column:auto;
    display:block;
    text-align:right;
    justify-self:end
  }
  .draw-card-price small {
    display:block
  }
  .purchase-panel {
    padding:18px 14px
  }
  .page-heading {
    margin-bottom:18px
  }
  .page-heading h1 {
    font-size:30px
  }
  .page-heading p {
    font-size:14px
  }
  .price-and-prizes {
    margin-bottom:14px
  }
  .draw-heading h2 {
    font-size:24px
  }
  .draw-meta {
    font-size:13px
  }
  .stepper button {
    height:75px
  }
  .quantity-label {
    font-size:22px;
    margin-bottom:15px
  }
  .quick-quantities button {
    min-height:54px;
    font-size:21px
  }
  .quantity-form .subtotal {
    margin-top:18px
  }
  .quantity-help {
    margin-bottom:0
  }
  .ticket-item>.ball {
    display:inline-flex
  }
  .ticket-item {
    grid-template-columns:49px minmax(0,1fr) auto
  }
  .ticket-item h3 {
    font-size:16px
  }
  .ticket-item p {
    font-size:12px
  }
  .ticket-item-side>strong {
    font-size:21px
  }
  .status-footer {
    font-size:10px
  }
}

/* Autoservicio: alto de pantalla */
html,body{height:100%}
.bingo-app{height:100dvh;min-height:0;padding-top:14px}
.workspace{grid-template-rows:minmax(0,1fr);min-height:0!important}
.panel{min-height:0}
.draws-panel,.ticket-panel{overflow:hidden}
.draw-list,.ticket-list{flex:1 1 auto;min-height:0!important;max-height:none!important;overflow-y:auto;overscroll-behavior:contain}
.draw-card{flex-shrink:0}
.purchase-panel{overflow-y:auto;overscroll-behavior:contain}
.purchase-panel>*{flex-shrink:0}
.purchase-panel>.quantity-form{flex:1 0 auto}
.ticket-bottom{flex-shrink:0}
.status-footer{margin-top:10px;padding:6px 4px}
@media (max-height:820px){
  .section-heading{margin-bottom:10px}
  .filters{margin-bottom:9px}
  .filters button{min-height:36px}
  .date-filter{min-height:40px;margin-bottom:10px}
  .calendar-button{margin-top:9px;padding:9px 14px}
  .draw-heading{min-height:0}
  .price-and-prizes{margin:8px 0 10px;min-height:0;padding:12px 9px}
  .quantity-label{font-size:20px;margin:0 0 10px}
  .stepper button{height:62px;font-size:42px}
  .stepper input{font-size:40px}
  .quick-quantities{margin-top:10px}
  .quick-quantities button{min-height:46px;font-size:20px}
  .quantity-help{margin-top:8px;margin-bottom:12px}
  .subtotal{min-height:60px;padding:10px 14px}
  .subtotal strong{font-size:28px}
  .add-button{min-height:54px;margin-top:9px}
  .ticket-item{padding:11px 0}
  .sell-button{min-height:52px}
  .clear-button{min-height:40px}
}
@media (max-width:980px){.bingo-app{height:auto;min-height:100dvh}.workspace{grid-template-rows:none}}