/* ════════════════════════════════════════════════════════════════════════════
   qrcodes.css — módulo QR Codes
   Sigue el mismo patrón visual que calls.css / forms_v2.css / memotracker
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tab pane ────────────────────────────────────────────────────────────── */
#pills-qrcodes {
  flex-direction: column;
  min-height: 0;
}
#pills-qrcodes.active { display: flex !important; }

/* ── Search bar ──────────────────────────────────────────────────────────── */
#pills-qrcodes .tab-search-bar { margin-bottom: .65rem; }
#pills-qrcodes .tab-search-bar .input-group-text {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(148,163,184,.7);
}
#pills-qrcodes .tab-search-bar .form-control {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: #e2e8f0;
}
#pills-qrcodes .tab-search-bar .form-control:focus {
  background: rgba(255,255,255,.06);
  border-color: rgba(59,130,246,.5);
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.15);
  color: #f1f5f9;
}

/* ── Main section: flex column so list can scroll ────────────────────────── */
#qrMainSection {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ── QR list: override dtv-col grid to 2 columns (no status) ─────────────── */
.qr-cols-header,
#qrList .dtv-row {
  grid-template-columns: 1fr max-content;
}
.qr-cols-header .dtv-col--main,
#qrList .dtv-row .dtv-col--main    { grid-column: 1; }
.qr-cols-header .dtv-col--actions,
#qrList .dtv-row .dtv-col--actions { grid-column: 2; }

/* Scrollable list region */
.qr-list-scroll {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.2) transparent;
}

/* Tag chips in list row */
.qr-row-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .18rem;
  align-items: center;
}

/* ── View toggle (QR Codes / Logos segmented control) ────────────────────── */
.qr-view-toggle { border-radius: .4rem; overflow: hidden; }
.qr-view-toggle .btn.cal-hdr-btn {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.13);
  font-size: .8rem;
  padding: .28rem .7rem;
  color: rgba(148,163,184,.75);
  background: rgba(255,255,255,.04);
  transition: background .15s, color .15s;
}
.qr-view-toggle .btn.cal-hdr-btn:first-child { border-radius: .4rem 0 0 .4rem; border-right: none; }
.qr-view-toggle .btn.cal-hdr-btn:last-child  { border-radius: 0 .4rem .4rem 0; }
.qr-view-toggle .btn.cal-hdr-btn.active {
  background: rgba(59,130,246,.18);
  color: #93c5fd;
  border-color: rgba(59,130,246,.35);
}
.qr-view-toggle .btn.cal-hdr-btn:hover:not(.active) {
  background: rgba(255,255,255,.08);
  color: #e2e8f0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.qr-empty-create-btn {
  color: #60a5fa; text-decoration: underline;
  background: none; border: none; padding: 0; cursor: pointer;
}
.qr-empty-create-btn:hover { color: #93c5fd; }

/* ── Editor modal: two-panel layout ─────────────────────────────────────── */
#qrEditorModal .fv2-edit-body { flex-direction: row !important; }

.qr-editor-form-panel { flex: 1 1 auto; min-width: 0; }

.qr-editor-preview-panel {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.25);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.15) transparent;
}

.qr-editor-preview-inner {
  padding: 2rem 1.25rem 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Preview box — larger, click cursor */
.qr-preview-box {
  width: 100%;
  aspect-ratio: 1;
  border: 2px dashed rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .75rem;
  overflow: hidden;
  max-width: 300px;
  cursor: pointer;
  transition: border-color .15s;
}
.qr-preview-box:hover { border-color: rgba(59,130,246,.35); }
.qr-preview-box canvas {
  max-width: 100%;
  height: auto !important;
  border-radius: 4px;
  image-rendering: auto;
  display: block;
}

/* Visual options row */
.qr-visual-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: flex-end;
}
.qr-visual-item { display: flex; flex-direction: column; }
.qr-visual-item .form-label { margin-bottom: .28rem; }

/* Modal footer alignment */
.qr-edit-footer { justify-content: flex-end !important; }

/* ── Color swatch picker ─────────────────────────────────────────────────── */
.qr-cpick { position: relative; }

.qr-cpick-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .55rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: .375rem;
  cursor: pointer;
  color: #e2e8f0;
  font-size: .82rem;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.qr-cpick-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.qr-cpick-btn code {
  font-size: .78rem;
  color: rgba(148,163,184,.8);
  font-family: monospace;
}

.qr-cpick-dot {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.18);
}

.qr-cpick-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1060;
  background: #1a2035;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: .5rem;
  padding: .65rem .75rem .6rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  min-width: 200px;
}

.qr-cpick-presets {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  margin-bottom: .55rem;
}

.qr-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  flex-shrink: 0;
  padding: 0;
}
.qr-swatch:hover { transform: scale(1.18); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.qr-swatch--saved { border-color: rgba(59,130,246,.5); }

.qr-swatch-sep {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: .2rem 0;
}

.qr-cpick-custom {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .1rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.qr-cpick-native {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 4px !important;
  cursor: pointer;
  background: transparent !important;
  flex-shrink: 0;
}

.qr-cpick-hex {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: .3rem;
  color: #e2e8f0;
  font-size: .78rem;
  font-family: monospace;
  padding: .25rem .4rem;
  min-width: 0;
}
.qr-cpick-hex:focus {
  outline: none;
  border-color: rgba(59,130,246,.5);
  box-shadow: 0 0 0 .15rem rgba(59,130,246,.15);
}

.qr-cpick-save {
  background: none;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: .3rem;
  color: rgba(148,163,184,.7);
  padding: .25rem .38rem;
  cursor: pointer;
  font-size: .78rem;
  flex-shrink: 0;
  transition: color .12s, border-color .12s;
}
.qr-cpick-save:hover { color: #60a5fa; border-color: rgba(59,130,246,.5); }

/* ── Logo library toolbar ────────────────────────────────────────────────── */
.qr-lib-toolbar {
  padding: .55rem .65rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .5rem;
}
.qr-lib-name-input {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e2e8f0 !important;
  min-width: 160px;
  max-width: 280px;
}
.qr-lib-name-input:focus {
  border-color: rgba(59,130,246,.5) !important;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.15) !important;
}
.qr-lib-name-input::placeholder { color: rgba(148,163,184,.4) !important; }

/* ── Logo library grid ───────────────────────────────────────────────────── */
.qr-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .85rem;
  padding-bottom: 2rem;
}

/* ── Logo library card ───────────────────────────────────────────────────── */
.qr-logo-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, background .15s;
}
.qr-logo-card:hover {
  border-color: rgba(59,130,246,.35);
  background: rgba(255,255,255,.05);
  box-shadow: 0 3px 16px rgba(0,0,0,.3);
}
.qr-logo-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 16px;
  min-height: 110px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.qr-logo-card-thumb img {
  max-width: 100%;
  max-height: 78px;
  object-fit: contain;
  border-radius: 3px;
}
.qr-logo-card-body { padding: .55rem .7rem .3rem; flex: 1 1 auto; min-width: 0; }
.qr-logo-card-name {
  font-weight: 600; font-size: .84rem; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .15rem;
}
.qr-logo-card-meta { font-size: .68rem; color: rgba(148,163,184,.35); }
.qr-logo-card-actions {
  display: flex; gap: .3rem; padding: .4rem .5rem .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
  justify-content: flex-end;
}

/* ── Logo picker (inside editor modal) ──────────────────────────────────── */
.qr-logo-picker-wrap {
  display: flex;
  flex-direction: row;
  gap: .55rem;
  overflow-x: auto;
  padding: .5rem .25rem .65rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.18) transparent;
}
.qr-logo-picker-wrap::-webkit-scrollbar { height: 4px; }
.qr-logo-picker-wrap::-webkit-scrollbar-thumb { background: rgba(148,163,184,.2); border-radius: 2px; }

.qr-logo-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; width: 76px; min-width: 76px; padding: .5rem .3rem .4rem;
  border: 2px solid rgba(255,255,255,.1); border-radius: 8px;
  background: rgba(255,255,255,.03);
  cursor: pointer; transition: border-color .15s, background .15s; user-select: none;
}
.qr-logo-opt:hover { border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.08); }
.qr-logo-opt--active { border-color: rgba(59,130,246,.75) !important; background: rgba(59,130,246,.15) !important; }
.qr-logo-opt--upload { border-style: dashed; border-color: rgba(59,130,246,.3); }
.qr-logo-opt--upload:hover { border-color: rgba(59,130,246,.6); }
.qr-logo-opt-img {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 5px; overflow: hidden;
}
.qr-logo-opt-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qr-logo-opt-label {
  font-size: .65rem; color: rgba(148,163,184,.7); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; line-height: 1.2;
}
.qr-logo-opt--active .qr-logo-opt-label { color: #93c5fd; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #qrEditorModal .fv2-edit-body { flex-direction: column !important; }
  .qr-editor-preview-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .qr-editor-preview-inner { padding: 1.25rem 1rem; }
  .qr-preview-box { max-width: 200px; }
  .qr-logo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem; }
  .qr-lib-name-input { max-width: 100%; }
  .qr-cols-header { display: none; }
}