/* ============================================================
   TICKIFY · Identidad de marca v2.0 — paleta "Ámbar reflector"
   Cargar DESPUÉS de bootstrap.css / bootstrap-table.css.
   En el <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* Marca */
  --tk-amber: #FFB224;        /* Ámbar reflector · marca y acción de compra */
  --tk-amber-hover: #FFC251;
  --tk-amber-light: #F5A000;  /* isotipo sobre fondo claro */
  --tk-amber-text: #B86E00;   /* "ify" y enlaces sobre fondo claro */
  --tk-amber-ink: #1A1300;    /* texto SOBRE ámbar (nunca blanco) */

  /* Neutros */
  --tk-night: #0F0E13;        /* fondo */
  --tk-surface: #1A1820;      /* tablas, tarjetas */
  --tk-surface-2: #141219;    /* filas alternas */
  --tk-border: #2C2934;
  --tk-text: #F4F1EA;
  --tk-muted: #A19DAB;

  /* Funcionales — reservados, no decorar con ellos */
  --tk-valid: #2FD27A;        /* válido · disponible · pagado */
  --tk-invalid: #F0444F;      /* inválido · cancelado · pago fallido */
  --tk-selected: #5B8CFF;     /* asiento seleccionado por el usuario */
  --tk-done: #6B6875;         /* usado · vendido · finalizado */

  /* Tipografía */
  --tk-font-display: 'Sora', sans-serif;
  --tk-font-body: 'DM Sans', sans-serif;

  /* Puente con Bootstrap 5 */
  --bs-primary: var(--tk-amber);
  --bs-primary-rgb: 255, 178, 36;
  --bs-success: var(--tk-valid);
  --bs-success-rgb: 47, 210, 122;
  --bs-danger: var(--tk-invalid);
  --bs-danger-rgb: 240, 68, 79;
  --bs-info: var(--tk-selected);
  --bs-secondary: var(--tk-done);
  --bs-body-bg: var(--tk-night);
  --bs-body-color: var(--tk-text);
  --bs-secondary-color: var(--tk-muted);
  --bs-border-color: var(--tk-border);
  --bs-body-font-family: var(--tk-font-body);
  --bs-link-color: var(--tk-amber);
  --bs-link-color-rgb: 255, 178, 36;
  --bs-link-hover-color: var(--tk-amber-hover);
}

body { font-family: var(--tk-font-body); background: var(--tk-night); color: var(--tk-text); }
h1, h2, h3, h4, h5, h6, .tk-display { font-family: var(--tk-font-display); letter-spacing: -0.02em; }

/* ---------- Imagotipo ---------- */
.tk-logo { display: inline-block; height: 32px; width: auto; }   /* usar svg/imagotipo-horizontal-*.svg */

/* ---------- Botones ---------- */
.btn-primary {
  --bs-btn-color: var(--tk-amber-ink);
  --bs-btn-bg: var(--tk-amber);
  --bs-btn-border-color: var(--tk-amber);
  --bs-btn-hover-color: var(--tk-amber-ink);
  --bs-btn-hover-bg: var(--tk-amber-hover);
  --bs-btn-hover-border-color: var(--tk-amber-hover);
  --bs-btn-active-color: var(--tk-amber-ink);
  --bs-btn-active-bg: #E89A00;
  --bs-btn-active-border-color: #E89A00;
  --bs-btn-focus-shadow-rgb: 255, 178, 36;
  font-family: var(--tk-font-display);
  font-weight: 600;
  border-radius: 10px;
  min-height: 44px;
}
.btn-outline-secondary { --bs-btn-color: var(--tk-muted); --bs-btn-border-color: var(--tk-border); --bs-btn-hover-bg: var(--tk-surface); --bs-btn-hover-color: var(--tk-text); }

/* ---------- Tablas (bootstrap-table) ---------- */
.table {
  --bs-table-bg: var(--tk-surface);
  --bs-table-color: var(--tk-text);
  --bs-table-border-color: var(--tk-border);
  --bs-table-striped-bg: var(--tk-surface-2);
  --bs-table-hover-bg: #221F2A;
}
.table thead th { font-family: var(--tk-font-display); font-weight: 600; background: var(--tk-night); color: var(--tk-muted); }

/* Fechas: neutras (el verde se reserva para "válido") */
.tk-date { display: inline-block; font-size: 13px; color: var(--tk-text); border: 1px solid var(--tk-border); background: var(--tk-night); border-radius: 6px; padding: 3px 10px; }

/* ---------- Estados de evento ---------- */
.tk-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; border-radius: 999px; padding: 3px 10px; border: 1px solid currentColor; }
.tk-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tk-status--borrador   { color: var(--tk-muted); }
.tk-status--en-venta   { color: var(--tk-amber); }
.tk-status--agotado    { color: var(--tk-text); }
.tk-status--cancelado  { color: var(--tk-invalid); }
.tk-status--finalizado { color: var(--tk-done); }

/* ---------- Mapa de asientos ---------- */
.tk-seat { width: 28px; height: 28px; border-radius: 8px 8px 4px 4px; border: 2px solid transparent; }
.tk-seat--disponible  { background: transparent; border-color: var(--tk-valid); }
.tk-seat--seleccionado{ background: var(--tk-selected); border-color: var(--tk-selected); }
.tk-seat--reservado   { background: repeating-linear-gradient(45deg, var(--tk-border) 0 4px, transparent 4px 8px); border-color: var(--tk-border); }
.tk-seat--vendido     { background: var(--tk-done); border-color: var(--tk-done); opacity: .5; }

/* ---------- Validación en puerta ---------- */
.tk-scan { border-radius: 20px; padding: 32px; text-align: center; font-family: var(--tk-font-display); font-weight: 700; }
.tk-scan--valido   { background: var(--tk-valid);   color: #04210F; }
.tk-scan--invalido { background: var(--tk-invalid); color: #FFFFFF; }
.tk-scan--usado    { background: var(--tk-done);    color: #FFFFFF; }

/* Paginación */
.page-link { background: var(--tk-surface); border-color: var(--tk-border); color: var(--tk-text); }
.page-item.active .page-link { background: var(--tk-amber); border-color: var(--tk-amber); color: var(--tk-amber-ink); }

/* Footer */
.tk-footer { font-family: var(--tk-font-display); letter-spacing: 0.16em; font-size: 13px; color: var(--tk-muted); border-top: 1px solid var(--tk-border); }