/* ============================================================================
   TENANT BRAND UTILITIES - Multi-Tenant Design Tokens
   
   Este archivo NO es procesado por Tailwind para evitar purge.
   Las variables CSS (--tenant-*) son inyectadas dinámicamente por TenantHelper.
   ============================================================================ */

/* Backgrounds */
.bg-brand-primary {
  background-color: var(--tenant-primary) !important;
}

.bg-brand-secondary {
  background-color: var(--tenant-secondary) !important;
}

.bg-brand-tertiary {
  background-color: var(--tenant-tertiary) !important;
}

/* Text Colors */
.text-brand-primary {
  color: var(--tenant-primary) !important;
}

.text-brand-secondary {
  color: var(--tenant-secondary) !important;
}

.text-brand-tertiary {
  color: var(--tenant-tertiary) !important;
}

/* Border Colors */
.border-brand-primary {
  border-color: var(--tenant-primary) !important;
}

.border-brand-secondary {
  border-color: var(--tenant-secondary) !important;
}

.border-brand-tertiary {
  border-color: var(--tenant-tertiary) !important;
}

/* Typography */
.font-tenant {
  font-family: var(--tenant-font) !important;
}

/* Page-level semantic backgrounds */
.bg-brand-hero {
  background-color: var(--color-hero-bg) !important;
}

.bg-brand-page {
  background-color: var(--color-page-bg) !important;
}

/* Hover variants */
.hover\:bg-brand-primary:hover {
  background-color: var(--tenant-primary) !important;
}

.hover\:bg-brand-secondary:hover {
  background-color: var(--tenant-secondary) !important;
}

.hover\:text-brand-primary:hover {
  color: var(--tenant-primary) !important;
}

.hover\:text-brand-secondary:hover {
  color: var(--tenant-secondary) !important;
}

/* ── Daubing: bingos_norte ──────────────────────────────────────────────────
   Scoped a data-tenant="bingos_norte" para no interferir con bingo_express,
   que gestiona el color del sello a través de la Stimulus Classes API.
   transition deliberadamente corta (100ms) — dispositivos de gama baja primero. */
[data-tenant="bingos_norte"] [data-number][data-marked] {
  background-color: var(--tenant-primary) !important;
  transition: background-color 0.1s ease;
}
[data-tenant="bingos_norte"] [data-number][data-marked] span {
  color: #ffffff !important;
  transition: color 0.1s ease;
}

/* ── Daubing: bingo_express ─────────────────────────────────────────────────
   Mismo patrón CSS que bingos_norte (probado y confiable), scoped a este tenant.
   Diferencia visual: scale + sombra hacen el sello más prominente.
   Stimulus Classes API sigue siendo la que aplica el atributo data-marked. */
[data-tenant="bingo_express"] [data-number] {
  transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
[data-tenant="bingo_express"] [data-number][data-marked] {
  background-color: var(--tenant-primary) !important;
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgb(var(--tenant-primary-rgb) / 0.45);
  transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
[data-tenant="bingo_express"] [data-number][data-marked] span {
  color: #ffffff !important;
  transition: color 0.1s ease;
}

/* Botón "Limpiar marcas": vive en el template pero solo se muestra cuando el
   ancestro tiene el controller activo (cartones activos). Para cartones del
   historial no hay data-controller, así que el botón queda oculto sin condicional
   en ERB — el template no necesita saber si el cartón es activo o finalizado. */
.card-marker-clear-btn {
  display: none;
}
[data-controller~="card-marker"] .card-marker-clear-btn {
  display: flex;
}

/* Cartones finalizados: deshabilita el cursor interactivo en las celdas.
   data-daubing-disabled se inyecta en _ticket_wrapper.html.erb para section==:finished. */
[data-daubing-disabled] [data-number] {
  cursor: default !important;
  pointer-events: none;
}

@layer base {
  /* Tenant: Bingos del Norte (AWS EKS) */
  .tenant-bingos_norte {
    /* Identidad: Violeta Profundo y Dorado */
    --color-primary: 49 46 129;      /* indigo-900 hex: #312e81 */
    --color-primary-light: 67 56 202; /* indigo-700 */
    --color-secondary: 245 158 11;    /* amber-500 hex: #f59e0b */
    --color-secondary-hover: 217 119 6; /* amber-600 */
    
    /* Fondos */
    --bg-body: 248 250 252;          /* slate-50 */
    --bg-card: 255 255 255;          /* white */
    
    /* Tipografía */
    --font-heading: "Inter", sans-serif;
    --font-body: "Inter", sans-serif;
    
    /* Botones y Acciones */
    --btn-primary-bg: var(--color-secondary);
    --btn-primary-text: 255 255 255;
    --btn-border-radius: 0.5rem;
  }
}