/* ====== Base ====== */
:root{
  --brand:#0d6efd;
  --bg:#f6f8fb;
  --ok:#16a34a;            /* verde check */
  --ok-ink:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
}

html,body{background:var(--bg); color:var(--ink);}

.app-header{
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color:#fff;
}
.app-title{font-weight:800; letter-spacing:.2px;}
.app-subtitle{opacity:.9}

/* ====== Grid ====== */
.codes-grid .row{ --bs-gutter-x: .9rem; --bs-gutter-y: .9rem; }

.code-col{ display:flex; }
.code-cell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  min-height:72px;
  border-radius:18px;
  border:1px solid #e5e7eb;
  background:#fff;
  transition: all .12s ease;
  font-weight:800;
  font-size: clamp(.95rem, 2.5vw, 1.1rem);
  letter-spacing:.4px;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.code-cell:hover{ box-shadow: 0 8px 24px rgba(2,6,23,.08); transform: translateY(-1px); }
.code-cell:active{ transform: translateY(0); }

.code-label{ pointer-events:none; }

/* Estados no disponibles (se ocultan en PHP si stock=0; esto queda por si hay bloqueados/vendidos) */
.sold-label{
  position:absolute; bottom:8px; right:10px;
  background:#f1f5f9; color:#334155; font-size:.7rem; font-weight:700;
  padding:.15rem .45rem; border-radius:.45rem;
}
.sold-blocked{ background:#fee2e2; color:#991b1b; }

/* ====== Selección con ticket verde ====== */
.code-cell.selected{
  border-color: rgba(22,163,74,.35);
  box-shadow: 0 10px 30px rgba(22,163,74,.18);
  background: linear-gradient(180deg,#ffffff 0%, #f0fff4 100%);
  outline: 2px solid rgba(22,163,74,.55);
}

/* Badge del check (SVG inline con data URI para nitidez) */
.code-cell.selected::after{
  content:"";
  position:absolute; top:-10px; right:-10px;
  width:60px; height:40px; border-radius:999px;
  background: var(--ok);
  box-shadow: 0 6px 18px rgba(22,163,74,.45);
  border: 2px solid #fff;
  /* ícono check */
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/70% no-repeat;
  background-color: var(--ok);
}

/* Accesibilidad: enfoque visible al navegar con teclado */
.code-cell:focus-visible{
  outline: 3px solid #22c55e;
  outline-offset: 2px;
}

/* ====== Responsive touch targets ====== */
@media (max-width: 575.98px){
  .code-cell{ min-height:66px; border-radius:16px; }
  .sold-label{ font-size:.66rem; }
}

/* ====== Header: buscador ====== */
.search-wrap .input-group .form-control{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}