/* =======================
   TEMA GRIS + AZUL + DORADO + VERDE 2026
   Paleta inspirada en la referencia visual proporcionada.
======================= */
body{
  background:
    radial-gradient(circle at 50% -20%,rgba(34,46,164,.18),transparent 38%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}

/* Cabecera: logo + búsqueda + consulta de ticket + acceso */
.header{
  display:grid;
  grid-template-columns:minmax(135px,160px) minmax(220px,1fr) minmax(340px,430px) minmax(250px,max-content);
  align-items:center;
  justify-content:stretch;
  gap:12px;
  min-height:74px;
  padding:8px 14px;
  background:linear-gradient(180deg,#373737 0%,#2d2d2d 100%);
  border-bottom:2px solid #111;
  box-shadow:0 7px 18px rgba(0,0,0,.38);
}

.logo{
  min-width:0;
  display:flex;
  align-items:center;
  text-decoration:none;
}
.logo-img{
  width:150px;
  max-width:100%;
  height:auto;
  filter:brightness(0) invert(1);
  opacity:.98;
}

.header-search,
.ticket-check-form{
  min-width:0;
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:11px;
  border:1px solid #111;
  border-radius:5px;
  background:linear-gradient(180deg,#202020 0%,#181818 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.03);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.header-search:focus-within,
.ticket-check-form:focus-within{
  border-color:var(--yellow);
  box-shadow:0 0 0 2px rgba(231,167,21,.18),inset 0 1px 0 rgba(255,255,255,.05);
}
.header-field-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:#a7a7a7;
}
#buscar-liga,
#ticket-code{
  min-width:0;
  width:100%;
  height:100%;
  padding:0 9px 0 0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  color:#f5f5f5;
  font-size:13px;
  font-weight:650;
  cursor:text;
  user-select:text;
}
#buscar-liga::placeholder,
#ticket-code::placeholder{
  color:#9b9b9b;
  opacity:1;
}
#buscar-liga:focus,
#ticket-code:focus{
  border-color:transparent;
  outline:0;
  box-shadow:none;
}

.ticket-checker{
  position:relative;
  min-width:0;
}
.ticket-check-form{
  width:100%;
}
.ticket-check-form button{
  align-self:stretch;
  flex:0 0 auto;
  min-width:132px;
  padding:0 13px;
  border:0;
  border-left:1px solid #111;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#f0b624 0%,#d59400 100%);
  color:#16120a;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
}
.ticket-check-form button:hover:not(:disabled){
  filter:brightness(1.07);
}
.ticket-check-form button:disabled{
  cursor:wait;
  opacity:.72;
}

.ticket-check-result{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:2600;
  padding:12px 13px;
  border:1px solid #555;
  border-radius:7px;
  background:linear-gradient(180deg,#2f2f2f 0%,#232323 100%);
  color:#f5f5f5;
  box-shadow:0 16px 34px rgba(0,0,0,.52);
}
.ticket-check-result::before{
  content:"";
  position:absolute;
  top:-6px;
  left:28px;
  width:10px;
  height:10px;
  border-top:1px solid currentColor;
  border-left:1px solid currentColor;
  background:#2f2f2f;
  transform:rotate(45deg);
  opacity:.8;
}
.ticket-check-result-heading{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ticket-check-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:0 9px;
  border-radius:4px;
  background:#555;
  color:#fff;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.ticket-check-code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dedede;
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ticket-check-message{
  margin:8px 0 0;
  color:#d6d6d6;
  font-size:12px;
  line-height:1.4;
  font-weight:650;
}
.ticket-check-result.status-pendiente{
  border-color:#a77a16;
  color:var(--yellow);
}
.ticket-check-result.status-pendiente .ticket-check-badge{
  background:var(--yellow);
  color:#18130a;
}
.ticket-check-result.status-ganado{
  border-color:#118a18;
  color:#20bc29;
}
.ticket-check-result.status-ganado .ticket-check-badge{
  background:#07910d;
  color:#fff;
}
.ticket-check-result.status-perdido,
.ticket-check-result.status-error{
  border-color:#9a2b27;
  color:#d84a43;
}
.ticket-check-result.status-perdido .ticket-check-badge,
.ticket-check-result.status-error .ticket-check-badge{
  background:#b92520;
  color:#fff;
}
.ticket-check-result.status-loading{
  border-color:#585858;
  color:#bcbcbc;
}

.login-header{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:8px;
}
#login-form{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(130px,180px) auto;
  align-items:center;
  gap:8px;
}
#login-form input{
  width:100%;
  height:42px;
  padding:0 11px;
  border:1px solid #111;
  border-radius:5px;
  outline:0;
  background:linear-gradient(180deg,#202020 0%,#181818 100%);
  color:#f5f5f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#login-form input:focus{
  border-color:var(--yellow);
  box-shadow:0 0 0 2px rgba(231,167,21,.18);
}
#login-form input::placeholder{color:#9b9b9b}
#login-form button,
#logout-btn{
  height:42px;
  border-radius:5px;
}
#login-form button{
  min-width:78px;
  background:linear-gradient(180deg,#10ad18 0%,#07850c 100%);
  color:#fff;
  border:1px solid #056d09;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 7px rgba(0,0,0,.3);
}
#login-form button:hover:not(:disabled){filter:brightness(1.08)}
#logged-in:not([hidden]){
  min-width:0;
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
#logged-in span{color:#22c82b}
.admin-link{
  height:42px;
  min-height:42px;
  border-color:#6d5318;
  background:linear-gradient(180deg,#4a3b1b,#302813);
  color:#f7d16b;
}
#logout-btn{
  border:1px solid #151515;
  background:linear-gradient(180deg,#505050,#383838);
  color:#fff;
}
.login-message{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  width:max-content;
  max-width:340px;
  min-height:0;
  color:#ff9b96;
  text-align:right;
  font-size:10px;
  line-height:1.25;
  pointer-events:none;
}