/* Ajustes: en móvil, índice de secciones (#/ajustes) y una sección por pantalla (#/ajustes?seccion=x).
   Desde 1024 px, menú a la izquierda y sección a la derecha. Solo variables de app.css (dos temas). */

/* ───────── Disposición ───────── */
.aj-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.aj-sin-seccion .aj-panel { display: none; }
.aj-con-seccion .aj-nav { display: none; }
.aj-con-seccion .aj-head-general { display: none; }
.aj-panel { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.aj-panel-head { display: none; }

@media (min-width: 1024px) {
  .aj-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-6); }
  .aj-sin-seccion .aj-panel, .aj-con-seccion .aj-nav { display: flex; }
  .aj-con-seccion .aj-head-general { display: flex; }
  .aj-head-seccion { display: none; }
  .aj-panel-head { display: flex; flex-direction: column; gap: 2px; }
  .aj-panel-titulo { font-size: var(--fs-xl); font-weight: 650; }
}

/* ───────── Menú de secciones ───────── */
.aj-nav { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.aj-nav-grupo { display: flex; flex-direction: column; gap: var(--sp-2); }
.aj-nav-titulo { font-size: var(--fs-sm); font-weight: 650; color: var(--text-3); padding: 0 var(--sp-1); }
.aj-nav-lista { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.aj-nav-lista > li + li { border-top: 1px solid var(--line); }
.aj-nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 64px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  color: var(--text); text-decoration: none;
}
.aj-nav-item:hover { background: var(--surface-2); color: var(--text); }
.aj-nav-item:active { background: var(--surface-3); }
.aj-nav-icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary-soft-ink); }
.aj-nav-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-nav-label { font-weight: 600; }
.aj-nav-sub { color: var(--text-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.aj-nav-chev { flex: none; color: var(--text-3); }

@media (min-width: 1024px) {
  .aj-nav { position: sticky; top: var(--sp-5); gap: var(--sp-4); }
  .aj-nav-lista { background: transparent; border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 2px; }
  .aj-nav-lista > li + li { border-top: 0; }
  .aj-nav-item { min-height: 42px; padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--text-2); font-weight: 550; }
  .aj-nav-item:hover { background: var(--surface-3); }
  .aj-nav-icono { width: auto; height: auto; background: none; color: var(--text-3); }
  .aj-nav-label { font-weight: 550; }
  .aj-nav-sub, .aj-nav-chev { display: none; }
  .aj-nav-item.is-actual { background: var(--primary-soft); color: var(--primary-soft-ink); }
  .aj-nav-item.is-actual .aj-nav-icono { color: var(--primary-soft-ink); }
}

/* ───────── Formularios de sección ───────── */
.aj-form { gap: var(--sp-4); }
.aj-actionbar { justify-content: flex-end; }
.aj-kv-num dd { text-align: right; }
.aj-kv-num { max-width: 360px; }

/* Logo: caja blanca como el papel del PDF, igual en los dos temas */
.aj-logo { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.aj-logo-vista {
  flex: none; display: grid; place-items: center;
  width: 180px; height: 104px; padding: var(--sp-2);
  background: #fff; color: #5b6779; border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.aj-logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.aj-logo-acciones { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 559px) {
  .aj-logo-vista { width: 100%; }
  .aj-logo-acciones { width: 100%; }
  .aj-logo-acciones > .btn { flex: 1 1 auto; }
}

/* Condiciones del contrato */
.aj-condiciones { min-height: 55vh; line-height: 1.55; }
.aj-texto-largo { white-space: pre-line; max-height: 60vh; overflow-y: auto; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }

/* ───────── WhatsApp ───────── */
.aj-vars-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 var(--sp-4); }
.aj-vars-wrap > summary { min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-weight: 650; cursor: pointer; list-style: none; }
.aj-vars-wrap > summary::-webkit-details-marker { display: none; }
.aj-vars-wrap > summary .icon { color: var(--text-3); transition: transform 0.15s; }
.aj-vars-wrap[open] > summary .icon { transform: rotate(180deg); }
.aj-vars-wrap[open] { padding-bottom: var(--sp-4); }
.aj-vars-wrap > p { margin-bottom: var(--sp-3); }
.aj-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.aj-var {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text);
}
.aj-var:hover { border-color: var(--primary); background: var(--primary-soft); }
.aj-var code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); overflow-wrap: anywhere; }
.aj-var span { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.3; }

.aj-wa-bloque { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.aj-wa-bloque.is-objetivo { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.aj-wa-aviso { color: var(--warn-soft-ink); background: var(--warn-soft); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 600; }
.aj-wa-vista { display: flex; flex-direction: column; gap: 6px; }
.aj-wa-vista-label { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.aj-wa-burbuja {
  align-self: flex-start; max-width: min(100%, 520px);
  padding: var(--sp-2) var(--sp-3); border-radius: 12px 12px 12px 4px;
  background: var(--ok-soft); color: var(--text); font-size: var(--fs-sm); line-height: 1.45;
  white-space: pre-line; overflow-wrap: anywhere;
}
.aj-wa-burbuja:empty::before { content: "(vacío)"; color: var(--text-3); }

/* ───────── Extras ───────── */
.aj-extras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.aj-extra {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end;
  padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.aj-extra-campos { display: contents; }
.aj-extra-campos > :nth-child(1), .aj-extra-campos > :nth-child(2) { grid-column: 1 / -1; }
.aj-extra-campos > :nth-child(3) { grid-column: 1; }
.aj-extra-acciones { grid-column: 2; display: flex; justify-content: flex-end; gap: 2px; }
.aj-extras-vacio { padding: var(--sp-4); color: var(--text-3); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); font-size: var(--fs-sm); }
@media (min-width: 560px) {
  .aj-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .aj-extra-campos > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .aj-extra-campos > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .aj-extra-campos > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .aj-extra-acciones { grid-column: 3; grid-row: 1; }
}

/* ───────── Cuenta ───────── */
.aj-tema .segmented { display: flex; width: 100%; max-width: 420px; }

/* ───────── Usuarios ───────── */
.aj-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-soft-ink); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.02em;
}
.aj-user-otras { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.aj-secret { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; letter-spacing: 0.04em; user-select: all; overflow-wrap: anywhere; }
.aj-secret-input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; }

/* ───────── Copias ───────── */
.aj-icono-caja { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface-3); color: var(--text-2); }
@media (max-width: 559px) {
  .aj-copias-acciones > .btn { flex: 1 1 100%; }
}

/* ───────── Auditoría ───────── */
.aj-filtros { align-items: end; }
.aj-audit .aj-col-resumen { min-width: 170px; overflow-wrap: anywhere; color: var(--text-2); }
@media (min-width: 720px) { .aj-audit .aj-solo-movil { display: none; } }
@media (max-width: 719px) {
  .aj-audit td.aj-solo-movil { justify-content: flex-start; gap: 0; color: var(--text-2); }
  .aj-audit td.aj-col-resumen { display: block; text-align: left; max-width: none; color: var(--text-3); }
  .aj-audit td.aj-col-resumen::before { content: none; }
  .aj-audit td.aj-col-resumen:not(:has(> span)) { display: none; }
}