/* Q_Pair v2.3.0 - Modern UI (light/dark)
   Usa variables globales "q_*" si existen, con fallbacks seguros.
*/
.q_pair.q_pair--v2{
  --qpair-bg: var(--q_color-bg, #ffffff);
  --qpair-fg: var(--q_color-text, #111827);
  --qpair-muted: var(--q_color-text-muted, #6b7280);
  --qpair-border: var(--q_color-border-muted, #e5e7eb);
  --qpair-border-strong: var(--q_color-border, #d1d5db);
  --qpair-primary: var(--q_color-primary, #2563eb);
  --qpair-danger: var(--q_color-danger, #dc2626);
  --qpair-shadow: var(--q_shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  --qpair-radius: var(--q_global-border-radius-md, 12px);
  --qpair-font: var(--q_global-font-family-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial);
  --qpair-size: var(--q_global-font-size-md, 14px);

  font-family: var(--qpair-font);
  font-size: var(--qpair-size);
  color: var(--qpair-fg);
  background: var(--qpair-bg);
  border: 1px solid var(--qpair-border);
  border-radius: var(--qpair-radius);
  box-shadow: var(--qpair-shadow);
  overflow: visible;
}

@media (prefers-color-scheme: dark){
  .q_pair.q_pair--v2{
    --qpair-bg: var(--q_color-bg, #0b1220);
    --qpair-fg: var(--q_color-text, #e5e7eb);
    --qpair-muted: var(--q_color-text-muted, #9ca3af);
    --qpair-border: var(--q_color-border-muted, #243047);
    --qpair-border-strong: var(--q_color-border, #334155);
    --qpair-shadow: var(--q_shadow-sm, 0 1px 2px rgba(0,0,0,.35));
  }
}

.q_pair2__topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding: 12px 12px;
  border-bottom: 1px solid var(--qpair-border);
  gap: 10px;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}

.q_pair2__topbar-left{
  display:flex;
  align-items:baseline;
  gap: 10px;
  min-width: 0;
}
.q_pair2__title{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.q_pair2__meta{
  font-size: 12px;
  color: var(--qpair-muted);
}

.q_pair2__topbar-right{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: nowrap;
}


/* Integración con Q_Lib (.q_button / .q_icon)
   - No redefinimos estilos globales: solo ajustamos tamaños DENTRO del componente.
*/

.q_pair2__form{
  display:flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--qpair-border);
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.q_pair2__field{min-width:160px;flex:1 1 220px}
.q_pair2__field--key{flex:0 0 260px;min-width:220px}
.q_pair2__field--type{flex:0 0 140px;min-width:120px}
.q_pair2__field--search{flex:1 1 260px}

@media (max-width: 860px){
  /* Mantener una sola fila con scroll horizontal en pantallas pequeñas */
  .q_pair2__form > .q_pair2__input{ flex-basis: 210px; min-width: 160px; }
  .q_pair2__form > .q_pair2__textarea{ flex-basis: 360px; min-width: 200px; }
  .q_pair2__form > .q_pair2__typewrap{ flex-basis: 170px; min-width: 140px; }
}
.q_pair2__input,
.q_pair2__textarea,
.q_pair2__select{
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--qpair-border-strong);
  background: var(--qpair-bg);
  color: var(--qpair-fg);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}

.q_pair2__textarea{
  resize: vertical;
  min-height: 40px;
  line-height: 1.25;
}

.q_pair2__input:focus,
.q_pair2__textarea:focus,
.q_pair2__select:focus{
  border-color: color-mix(in oklab, var(--qpair-primary) 55%, var(--qpair-border-strong));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--qpair-primary) 18%, transparent);
}

.q_pair2__input--search{
  padding-right: 36px;
}
.q_pair2__search{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--qpair-border);
  align-items:center;
}

.q_pair2__btn{
  border: 1px solid var(--qpair-border-strong);
  background: var(--qpair-bg);
  color: var(--qpair-fg);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  user-select:none;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.q_pair2__btn:hover{ transform: translateY(-1px); }
.q_pair2__btn:active{ transform: translateY(0px); }

.q_pair2__btn--primary{
  background: color-mix(in oklab, var(--qpair-primary) 18%, var(--qpair-bg));
  border-color: color-mix(in oklab, var(--qpair-primary) 55%, var(--qpair-border-strong));
}
.q_pair2__btn--danger{
  background: color-mix(in oklab, var(--qpair-danger) 14%, var(--qpair-bg));
  border-color: color-mix(in oklab, var(--qpair-danger) 55%, var(--qpair-border-strong));
}
.q_pair2__btn--ghost{
  background: transparent;
}
.q_pair2__btn--icon{
  width: 36px;
  height: 36px;
  padding: 0;
  display:grid;
  place-items:center;
  font-size: 18px;
  line-height: 1;
}
.q_pair2__btn--sm{
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.q_pair2__btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.q_pair2__tablewrap{
  padding-bottom: 8px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.q_pair2__tablewrap::-webkit-scrollbar{height:10px}
.q_pair2__tablewrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--qpair-border) 70%,transparent);border-radius:999px}

.q_pair2__tableclip{
  display:inline-block;
  margin:5px;
  min-width:100%;
  border:1px solid var(--qpair-border);
  overflow:hidden;
  background:color-mix(in oklab, var(--qpair-border) 12%, var(--qpair-bg));
}
.q_pair2__table{
  display: inline-table;
  width: max-content;
  min-width: 740px;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
}
.q_pair2__table th,.q_pair2__table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--qpair-border);
  vertical-align: top;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.q_pair2__table th{
  text-align: left;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--qpair-muted);
  background: color-mix(in oklab, var(--qpair-border) 24%, var(--qpair-bg));
}
.q_pair2__table tr:last-child td{ border-bottom: none; }
.q_pair2__th-actions{ width: 1%; white-space: nowrap; }

/* Fuerza scroll horizontal en contenedores estrechos */
.q_pair2__table th:nth-child(1), .q_pair2__table td:nth-child(1){ min-width: 220px; }
.q_pair2__table th:nth-child(2), .q_pair2__table td:nth-child(2){ min-width: 280px; }
.q_pair2__table th:nth-child(3), .q_pair2__table td:nth-child(3){ min-width: 140px; }
.q_pair2__table th:nth-child(4), .q_pair2__table td:nth-child(4){ min-width: 160px; }
/* Permite que Key y Value se partan en varias líneas (evita que se vean largas en una sola línea) */
.q_pair2__table th:nth-child(1),
.q_pair2__table td:nth-child(1),
.q_pair2__table th:nth-child(2),
.q_pair2__table td:nth-child(2){
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip;
  overflow: visible;
}

.q_pair2__actions{
  display:flex;
  justify-content:flex-end;
  gap: 6px;
  flex-wrap: nowrap;

  flex-wrap:nowrap;
  white-space:nowrap;
}


.q_pair2__value{
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: visible;
  white-space: normal;
  line-height: 1.25;
}

.q_pair.q_pair--v2 mark{
  background: color-mix(in oklab, var(--qpair-primary) 18%, transparent);
  color: inherit;
  border-radius: 6px;
  padding: 0 3px;
}
.q_pair2__value mark{
  background: color-mix(in oklab, var(--qpair-primary) 18%, transparent);
  color: inherit;
  border-radius: 6px;
  padding: 0 3px;
}

.q_pair2__errors{
  padding: 10px 12px;
  border-top: 1px solid var(--qpair-border);
  background: color-mix(in oklab, var(--qpair-danger) 8%, var(--qpair-bg));
  color: color-mix(in oklab, var(--qpair-danger) 80%, var(--qpair-fg));
  display:none;
}
.q_pair2__errors-list{
  margin: 0;
  padding-left: 18px;
}
.q_pair2__errors-list li{
  margin: 4px 0;
}

/* Modal */
.q_pair2__modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}
.q_pair2__modal.is-open{ display:flex; }

.q_pair2__modal-panel{
  width: min(860px, 96vw);
  max-height: 88vh;
  display:flex;
  flex-direction: column;
  background: var(--qpair-bg);
  border: 1px solid var(--qpair-border-strong);
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
  overflow:hidden;
}
.q_pair2__modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--qpair-border);
}
.q_pair2__modal-title{
  font-weight: 700;
}
.q_pair2__modal-body{
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  overflow:auto;
}
.q_pair2__modal-row{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.q_pair2__label{
  font-size: 12px;
  color: var(--qpair-muted);
  min-width: 70px;
}
.q_pair2__modal-textarea{
  min-height: 240px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.q_pair2__modal-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--qpair-border);
}

.q_pair.q_pair--v2.is-readonly{
  opacity: .98;
}

.q_pair2__form > .q_pair2__input{
  width:auto;
  flex: 0 0 240px;
  min-width: 180px;
}
.q_pair2__form > .q_pair2__textarea{
  width:auto;
  flex: 0 0 420px;
  min-width: 220px;
}
.q_pair2__form > .q_pair2__typewrap{
  flex: 0 0 190px;
  min-width: 150px;
}
.q_pair2__form > button{
  flex: 0 0 auto;
}


/* Fallback icon (cuando no hay renderer de q_icon) */
.q_pair.q_pair--v2 .q_icon.q_pair2__fallback-icon{
  width:auto;
  height:auto;
  font-size:14px;
  line-height:1;
  display:inline-block;
}