/* ═══════════════════════════════════════════════════════════════════════════
   CONFIGURACIÓN

   Como los ajustes de la Mac o del teléfono: un índice a la izquierda con la
   ficha de color de cada sección, y la sección abierta a la derecha, armada
   en grupos —un rótulo chiquito arriba y una caja con renglones—.

   Lo que manda en toda la hoja:

   · Cada sección tiene su tono (--tono) y lo lleva a todo lo suyo: el ícono
     del índice, el de la cabecera, el resplandor de arriba y los íconos de
     los renglones. Así se sabe dónde está uno sin leer el título.
   · Íconos de LÍNEA, como los del menú de la izquierda. Se probaron fichas de
     color con brillo y canto (vidrio) y Erick las rechazó el 2026-09-11: "como
     en 3D, no van con el programa". Donde hace falta un fondo, es el mismo
     cuadrito de color muy diluido de la pantalla de inicio, plano, sin
     degradados ni sombras.
   · En oscuro, lo que es TEXTO de color pasa por --tono-texto, que aclara el
     tono: un índigo hondo sobre azul noche no se alcanza a leer.
   · Moverse, sí, pero con sentido: la pastilla del índice se desliza de una
     sección a otra, el panel entra en cascada corta, y los dibujos (la nube,
     el ojo, el escudo) respiran despacio. Todo se apaga con "Reducir
     animaciones" o si la computadora pide menos movimiento. */

@property --aj-pastilla-tono { syntax: "<color>"; inherits: true; initial-value: #009f9b; }

.aj-tono-empresa { --tono: #3b74d4; }
.aj-tono-inicio { --tono: #0ea89b; }
.aj-tono-apariencia { --tono: #5a5fd0; }
.aj-tono-planilla { --tono: #12a05f; }
.aj-tono-privacidad { --tono: #4b5b73; }
.aj-tono-contrasena { --tono: #8b52d4; }
.aj-tono-respaldos { --tono: #e08a12; }
.aj-tono-nube { --tono: #1597d0; }
.aj-tono-actualizaciones { --tono: #d24d8a; }
.aj-tono-sistema { --tono: #6f7c91; }
.aj-tono-restablecer { --tono: #dc3f45; }
[class*="aj-tono-"] { --tono-texto: var(--tono); }
[data-theme="dark"] [class*="aj-tono-"] { --tono-texto: color-mix(in srgb, var(--tono) 58%, #fff); }

/* ── El marco ─────────────────────────────────────────────────────────────
   El fondo del índice se pinta desde el marco y no desde el índice: el
   índice va pegado arriba mientras se desliza, así que es más corto que la
   sección, y su propio fondo se acababa a media pantalla. */
html:has(.ajustes) .content { padding-top: 22px; padding-bottom: 22px; }

.ajustes {
  --aj-indice: 268px;
  --aj-indice-fondo: color-mix(in srgb, var(--canvas) 62%, var(--card));
  display: grid;
  grid-template-columns: var(--aj-indice) minmax(0, 1fr);
  /* El alto lo pone ajustarVentanaDeAjustes() con lo que queda de pantalla. */
  height: var(--aj-alto, 680px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(90deg, var(--aj-indice-fondo) 0 var(--aj-indice), var(--line) var(--aj-indice) calc(var(--aj-indice) + 1px), var(--card) 0);
  box-shadow: var(--e1);
  overflow: clip;
}
[data-theme="dark"] .ajustes { --aj-indice-fondo: color-mix(in srgb, #0e1522 55%, var(--card)); }

/* ── El ícono de la sección ─────────────────────────────────────────────────
   En el índice, de línea y del color de la sección, algo apagado en reposo y
   pleno al pasar o al estar abierta: el mismo trato del menú de la izquierda.
   En la cabecera, el cuadrito diluido de la pantalla de inicio. */
.aj-ficha {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--tono-texto);
  opacity: .78;
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease);
}
.aj-ficha svg { width: 19px; height: 19px; stroke-width: 2; }
.aj-ficha.grande {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--tono) 10%, transparent);
  opacity: 1;
}
.aj-ficha.grande svg { width: 23px; height: 23px; stroke-width: 1.9; }
[data-theme="dark"] .aj-ficha.grande { background: color-mix(in srgb, var(--tono) 17%, transparent); }

/* ── El índice ───────────────────────────────────────────────────────────── */
/* Entero y quieto, del alto de la ventana. Sin deslizador: si no cabe, se
   aprieta (.apretado). */
.aj-indice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px 10px 16px;
  overflow: hidden;
}
.aj-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0 2px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--muted);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, color var(--dur-2) ease;
}
.aj-buscar svg { width: 15px; height: 15px; flex: 0 0 auto; }
.aj-buscar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.aj-buscar input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.aj-buscar input::-webkit-search-cancel-button { cursor: pointer; }
.aj-buscar:focus-within { border-color: color-mix(in srgb, var(--teal) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal); }
.app-shell .aj-buscar input:focus-visible,
[data-theme="dark"] .app-shell .aj-buscar input:focus-visible { box-shadow: none; }

.aj-indice-cabeza { display: flex; align-items: center; gap: 11px; padding: 2px 8px 4px; }
.aj-indice-ico { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); }
.aj-indice-ico svg { width: 18px; height: 18px; }
.aj-indice-cabeza > div { display: grid; gap: 1px; min-width: 0; }
.aj-indice-cabeza b { color: var(--ink); font-size: 16px; font-weight: 680; letter-spacing: -.015em; }
.aj-indice-cabeza small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.aj-indice-pie { margin-top: auto; padding-top: 12px; }
.aj-indice-pie .button { width: 100%; min-height: 38px; font-size: 12.5px; }
.aj-indice.apretado .aj-indice-cabeza small { display: none; }

.aj-lista { position: relative; display: grid; align-content: start; gap: 12px; }
.aj-indice-grupo { display: grid; gap: 2px; }
.aj-indice-rotulo {
  padding: 0 10px 4px;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.aj-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 36px;
  padding: 5px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  text-align: left;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.aj-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.aj-item.on { color: var(--ink); font-weight: 650; }
.aj-item.on:hover { background: transparent; }
.aj-item:hover .aj-ficha { opacity: 1; transform: translateX(2px); }
.aj-item.on .aj-ficha { opacity: 1; }
.aj-item:active .aj-ficha { transform: none; }
.app-shell .aj-item:focus-visible { outline: 2px solid var(--tono); outline-offset: -2px; }
.aj-item-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-item-nombre .corto { display: none; }
/* Cuando el alto no alcanza se quitan los rótulos de grupo y se junta un
   poco la lista. Nada más: ni letra más chica ni íconos más chicos, que fue
   justo lo que se vio feo. */
.aj-indice.apretado { gap: 8px; }
.aj-indice.apretado .aj-indice-rotulo { display: none; }
.aj-indice.apretado .aj-lista { gap: 6px; }
.aj-indice.apretado .aj-indice-grupo + .aj-indice-grupo { padding-top: 6px; background: linear-gradient(var(--line), var(--line)) no-repeat top center / calc(100% - 20px) 1px; }
/* Último recurso, solo si ni así cabe (una ventana muy bajita): que se
   deslice por dentro, antes que quedarse con secciones cortadas. */
.aj-indice.desliza { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 32%, transparent) transparent; }

/* La pastilla: una sola pieza que viaja de sección en sección. */
.aj-pastilla {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--aj-pastilla-tono) 9%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aj-pastilla-tono) 14%, transparent);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .5s var(--ease),
    width .35s var(--ease),
    height .35s var(--ease),
    --aj-pastilla-tono .45s ease,
    opacity .2s ease;
}
.aj-pastilla::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 52%;
  border-radius: 0 3px 3px 0;
  background: var(--aj-pastilla-tono);
  transform: translateY(-50%);
}
[data-theme="dark"] .aj-pastilla {
  background: color-mix(in srgb, var(--aj-pastilla-tono) 15%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aj-pastilla-tono) 22%, transparent);
}
[data-theme="dark"] .aj-pastilla::before { background: color-mix(in srgb, var(--aj-pastilla-tono) 60%, #fff); }

.aj-punto {
  width: 8px;
  height: 8px;
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 20%, transparent);
  transform: scale(0);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.aj-item.con-novedad .aj-punto { transform: scale(1); }
.aj-sin-resultados { margin: 0; padding: 10px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* El puntito también en la barra lateral del programa. */
.nav-item.con-novedad .nav-icon { position: relative; }
.nav-item.con-novedad .nav-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 2px var(--card);
}

/* ── El panel ────────────────────────────────────────────────────────────── */
.aj-panel {
  --aj-lado: 38px;
  container: aj-panel / inline-size;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  padding: 0 var(--aj-lado) 34px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 38%, transparent) transparent;
}
/* El resplandor del tono, arriba a la derecha. Es lo único de color grande
   de la sección, y está lejos del texto a propósito. */
.aj-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 240px;
  background:
    radial-gradient(70% 100% at 100% 0%, color-mix(in srgb, var(--tono) 11%, transparent), transparent 70%),
    radial-gradient(40% 70% at 0% 0%, color-mix(in srgb, var(--tono) 5%, transparent), transparent 70%);
  pointer-events: none;
  transition: opacity .4s ease;
}
[data-theme="dark"] .aj-panel::before {
  background:
    radial-gradient(70% 100% at 100% 0%, color-mix(in srgb, var(--tono) 16%, transparent), transparent 70%),
    radial-gradient(40% 70% at 0% 0%, color-mix(in srgb, var(--tono) 7%, transparent), transparent 70%);
}

/* Se queda arriba mientras la sección se desliza, con un velo esmerilado
   —aquí sí hay contenido pasando por debajo, que es cuando el desenfoque
   hace algo— y una rayita que aparece al bajar. */
.aj-cabeza {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 calc(var(--aj-lado) * -1) 22px;
  padding: 22px var(--aj-lado) 16px;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow var(--dur-2) ease;
}
.aj-panel.deslizado .aj-cabeza { box-shadow: 0 1px 0 var(--line); }
.aj-cabeza-texto { min-width: 0; }
.aj-cabeza h2 { margin: 0; color: var(--ink); font-size: 25px; font-weight: 660; letter-spacing: -.02em; line-height: 1.15; }
.aj-cabeza p { max-width: 640px; margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.aj-cuerpo { display: grid; gap: 26px; min-width: 0; }

/* La entrada: la ficha llega con un giro corto, el título sube y los grupos
   detrás, en cascada. Hacia abajo en el índice, suben; hacia arriba, bajan. */
@keyframes aj-entra { from { opacity: 0; transform: translateY(var(--aj-desde, 12px)); } to { opacity: 1; transform: none; } }
@keyframes aj-ficha-entra { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.aj-panel.sube { --aj-desde: -12px; }
.aj-panel.aj-entra .aj-cabeza .aj-ficha { animation: aj-ficha-entra .4s var(--ease) both; }
.aj-panel.aj-entra .aj-cabeza-texto { animation: aj-entra .42s var(--ease) both; animation-delay: 40ms; }
.aj-panel.aj-entra .aj-cuerpo > *,
.aj-panel.aj-entra .aj-cuerpo > .aj-dos > * > * { animation: aj-entra .48s var(--ease) both; animation-delay: calc(90ms + var(--aj-turno, 0) * 50ms); }
.aj-cuerpo > :nth-child(2), .aj-dos > * > :nth-child(2) { --aj-turno: 1; }
.aj-cuerpo > :nth-child(3), .aj-dos > * > :nth-child(3) { --aj-turno: 2; }
.aj-cuerpo > :nth-child(4), .aj-dos > * > :nth-child(4) { --aj-turno: 3; }
.aj-cuerpo > :nth-child(n + 5), .aj-dos > * > :nth-child(n + 5) { --aj-turno: 4; }

/* ── Grupos y renglones ─────────────────────────────────────────────────── */
.aj-grupo { display: grid; gap: 9px; min-width: 0; }
.aj-grupo-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 18px; padding: 0 4px; }
.aj-grupo h3 { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aj-grupo-cabeza .aj-botones { margin: 0; }
.aj-caja {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--canvas) 38%, var(--card));
  box-shadow: 0 1px 2px rgba(16, 28, 66, .035);
  overflow: clip;
}
[data-theme="dark"] .aj-caja { background: color-mix(in srgb, #0e1522 28%, var(--card)); box-shadow: none; }
.aj-pie { margin: 0; padding: 0 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.aj-pie b { color: var(--ink); font-weight: 600; }

.aj-fila { position: relative; display: flex; align-items: center; gap: 15px; min-height: 64px; padding: 13px 18px; }
.aj-fila + .aj-fila::before { content: ""; position: absolute; top: 0; right: 0; left: 62px; height: 1px; background: var(--line); }
.aj-fila-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--tono-texto);
  background: color-mix(in srgb, var(--tono) 11%, transparent);
}
.aj-fila-ico svg { width: 17px; height: 17px; }
[data-theme="dark"] .aj-fila-ico { background: color-mix(in srgb, var(--tono) 19%, transparent); }
.aj-fila.aviso .aj-fila-ico { color: #c2410c; background: color-mix(in srgb, #f59e0b 16%, transparent); }
[data-theme="dark"] .aj-fila.aviso .aj-fila-ico { color: #e0b45c; }
.aj-fila-texto { display: grid; flex: 1; gap: 2px; min-width: 0; }
.aj-fila-texto b { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.aj-fila-texto small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.aj-fila-texto small b { font-size: inherit; }
.aj-fila-control { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.aj-fila-control .button, .aj-botones .button, .aj-archivo .button { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.aj-fila-control .button b svg, .aj-botones .button b svg, .aj-archivo .button b svg { width: 16px; height: 16px; }
.aj-botones { display: flex; flex-wrap: wrap; gap: 8px; }

.aj-dato {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aj-dato.grande { height: 30px; font-size: 15px; letter-spacing: -.01em; }
.aj-dato.bien { color: #0a7d5a; background: color-mix(in srgb, #12a05f 13%, transparent); }
.aj-dato.aviso { color: #a4570b; background: color-mix(in srgb, #f59e0b 17%, transparent); }
[data-theme="dark"] .aj-dato { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .aj-dato.bien { color: #4ade80; background: rgba(10, 158, 92, .17); }
[data-theme="dark"] .aj-dato.aviso { color: #e0b45c; background: rgba(169, 114, 10, .22); }

.aj-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }
.aj-vacio { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 16px; color: var(--muted); font-size: 13px; }
.aj-vacio svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .7; }

/* ── El interruptor ─────────────────────────────────────────────────────── */
.aj-interruptor {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 17%, transparent);
  box-shadow: inset 0 1px 2px rgba(16, 28, 66, .12);
  transition: background-color .28s ease;
}
.aj-interruptor i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 3px 8px rgba(0, 0, 0, .12);
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), width .18s ease;
}
.aj-interruptor:active i { width: 27px; }
.aj-interruptor.on { background: linear-gradient(135deg, var(--teal), #00b4ae); box-shadow: inset 0 1px 2px rgba(0, 80, 78, .25); }
.aj-interruptor.on i { transform: translateX(18px); }
.aj-interruptor.on:active i { transform: translateX(13px); }
[data-theme="dark"] .aj-interruptor { background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
[data-theme="dark"] .aj-interruptor.on { background: linear-gradient(135deg, #0fb3ad, #0a8f8a); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.aj-form { display: grid; gap: 24px; min-width: 0; }
.aj-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 16px; }
.aj-campos.una { grid-template-columns: minmax(0, 1fr); }
.aj-juego { display: contents; }
.aj-campo { display: grid; align-content: start; gap: 6px; min-width: 0; }
.aj-campo.ancho { grid-column: 1 / -1; }
.aj-campo > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.aj-campo input,
.aj-campo textarea,
.aj-select select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.aj-campo textarea { min-height: 104px; line-height: 1.5; resize: vertical; }
.aj-campo input::placeholder, .aj-campo textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.aj-select { position: relative; display: block; }
.aj-select select { padding-right: 38px; appearance: none; cursor: pointer; }
.aj-select > svg { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.aj-cuenta { color: color-mix(in srgb, var(--muted) 75%, transparent); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.aj-cuenta.cerca { color: #c2410c; }
[data-theme="dark"] .aj-cuenta.cerca { color: #e0b45c; }
.aj-campo .campo-error { color: #c2353b; font-size: 11.5px; }

/* La contraseña con su ojito, fuera de los cajones. */
:is(.ajustes, .restore-preview) .llave-campo { display: grid; gap: 6px; }
:is(.ajustes, .restore-preview) .llave-campo > label { color: var(--muted); font-size: 12px; font-weight: 600; }
:is(.ajustes, .restore-preview) .llave-campo small { color: var(--muted); font-size: 11.5px; }
:is(.ajustes, .restore-preview) .llave-caja { position: relative; display: block; max-width: 400px; }
:is(.ajustes, .restore-preview) .llave-caja input {
  width: 100%;
  min-height: 42px;
  padding: 10px 44px 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  letter-spacing: .08em;
}
.restore-preview .llave-campo { margin-top: 16px; }
.restore-preview .llave-estado { margin-top: 8px; }

.aj-guardar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; }
.aj-guardar-estado { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--muted); font-size: 12.5px; transition: color .2s ease; }
.aj-guardar-estado svg { width: 15px; height: 15px; flex: 0 0 auto; }
.aj-guardar .button { min-height: 40px; }
.con-cambios .aj-guardar-estado { color: #b45309; font-weight: 600; }
[data-theme="dark"] .con-cambios .aj-guardar-estado { color: #e0b45c; }
@keyframes aj-latido {
  0%, 100% { box-shadow: 0 6px 13px rgba(0, 159, 155, .19); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 17%, transparent), 0 8px 18px rgba(0, 159, 155, .28); }
}
.con-cambios .aj-guardar .button.primary { animation: aj-latido 2.4s ease-in-out infinite; }
.aj-caja > .aj-guardar { padding: 14px 16px 16px; border-top: 1px solid var(--line); }

/* ── Dos columnas: lo que se escribe y cómo se ve ───────────────────────── */
.aj-dos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.aj-columna { display: grid; gap: 24px; min-width: 0; }
.aj-vista { position: sticky; top: 100px; display: grid; gap: 10px; min-width: 0; }
.aj-vista-rotulo { display: flex; align-items: center; gap: 7px; padding: 0 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aj-vista-rotulo svg { width: 14px; height: 14px; }
.aj-vista-nota { margin: 0; padding: 0 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* El logo */
.aj-logo { display: flex; align-items: center; gap: 18px; padding: 16px; }
.aj-logo-marco {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 0 25%, transparent 0 50%) 0 0 / 14px 14px,
    var(--card);
}
.ajustes .aj-logo-marco img { width: 80px; height: 80px; margin: 0; object-fit: contain; }
.aj-logo-marco .logo-vacio { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.aj-logo-marco .logo-vacio b { font-size: 24px; }
.aj-logo-texto { display: grid; gap: 3px; min-width: 0; }
.aj-logo-texto b { color: var(--ink); font-size: 14px; font-weight: 650; }
.aj-logo-texto small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.aj-logo-texto .aj-botones { margin-top: 8px; }

/* El papel del membrete: blanco en los dos temas, igual que el comprobante. */
.aj-papel {
  --cp-tinta: #16202e;
  --cp-suave: #495667;
  --cp-tenue: #66738a;
  --cp-regla: #dfe5ee;
  --cp-verde: #0e9c93;
  padding: 18px 18px 16px;
  border-radius: 10px;
  background: #fff;
  color: var(--cp-tinta);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 0 0 1px rgba(16, 28, 66, .08), 0 8px 22px -14px rgba(16, 28, 66, .3);
}
[data-theme="dark"] .aj-papel { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 26px -14px rgba(0, 0, 0, .7); }
.aj-papel .cp-membrete { gap: 12px; padding-bottom: 12px; }
.aj-papel .cp-logo, .aj-papel .cp-membrete .logo-vacio { width: 40px; }
.aj-papel .cp-membrete .logo-vacio { border-radius: 9px; }
.aj-papel .cp-membrete .logo-vacio b { font-size: 13px; }
.aj-papel .cp-emisor b { font-size: 13px; overflow-wrap: anywhere; }
.aj-papel .cp-emisor span { font-size: 9.5px; line-height: 1.45; overflow-wrap: anywhere; }
.aj-papel .cp-emisor em { color: #c0392b; font-style: normal; font-weight: 600; }
.aj-papel .cp-tipo { padding-right: 0; }
.aj-papel .cp-tipo b { font-size: 13px; }
.aj-papel .cp-tipo span { font-size: 8.5px; }
.aj-papel-renglones { display: grid; gap: 7px; margin-top: 14px; }
.aj-papel-renglones i { display: block; height: 6px; border-radius: 3px; background: #eef1f5; }
.aj-papel-renglones i:nth-child(1) { width: 92%; }
.aj-papel-renglones i:nth-child(2) { width: 76%; }
.aj-papel-renglones i:nth-child(3) { width: 84%; }
.aj-papel-renglones i:nth-child(4) { width: 38%; background: color-mix(in srgb, #0e9c93 22%, #eef1f5); }

/* La pantalla de inicio, en chiquito */
.aj-mini-inicio {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 22px 18px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--teal) 14%, transparent) 0, transparent 34%),
    radial-gradient(circle at 96% 14%, color-mix(in srgb, var(--teal) 8%, transparent) 0, transparent 36%),
    var(--card);
  box-shadow: var(--e2);
  text-align: center;
}
.aj-mini-logo { display: grid; place-items: center; }
.ajustes .aj-mini-logo img { width: 50px; height: 50px; margin: 0; object-fit: contain; }
.aj-mini-logo .logo-vacio { width: 50px; height: 50px; aspect-ratio: auto; border-radius: 12px; }
.aj-mini-logo .logo-vacio b { font-size: 15px; }
.aj-mini-logo .logo-vacio small { display: none; }
.aj-mini-inicio > b { margin-top: 8px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.aj-mini-inicio > span[data-vivo-ver] { color: var(--muted); font-size: 11px; font-weight: 550; overflow-wrap: anywhere; }
.aj-mini-raya { display: block; width: 26px; height: 2px; margin: 6px 0; border-radius: 2px; background: var(--teal); }
.aj-mini-inicio > p { max-width: 250px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.aj-mini-modulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 14px; }
.aj-mini-modulo { display: grid; place-items: center; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); box-shadow: 0 1px 2px rgba(16, 28, 66, .05); }
.aj-mini-modulo svg { width: 15px; height: 15px; }
.aj-mini-modulo.colaboradores { color: var(--m-colaboradores); }
.aj-mini-modulo.tiempo { color: var(--m-tiempo); }
.aj-mini-modulo.pagos { color: var(--m-pagos); }
.aj-mini-modulo.vacaciones { color: var(--m-vacaciones); }
.aj-mini-modulo.aguinaldos { color: var(--m-aguinaldos); }
.aj-mini-modulo.liquidaciones { color: var(--m-liquidaciones); }
.aj-mini-modulo.reportes { color: var(--m-reportes); }
.aj-mini-modulo.expedientes { color: var(--m-expedientes); }
.aj-mini-pie { margin-top: 12px; color: color-mix(in srgb, var(--muted) 80%, transparent); font-size: 9px; }

/* ── Apariencia ─────────────────────────────────────────────────────────── */
.aj-temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.aj-temas .aj-tema {
  position: relative;
  display: grid;
  gap: 11px;
  padding: 10px 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: inherit;
  text-align: left;
  transition: border-color .2s ease, box-shadow .25s ease, transform .35s var(--ease);
}
.aj-temas .aj-tema:hover { border-color: color-mix(in srgb, var(--tono) 40%, var(--line)); transform: translateY(-1px); }
.aj-temas .aj-tema.on { border-color: var(--tono); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 16%, transparent); }
.aj-tema-nombre { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; padding: 0 2px; }
.aj-tema-nombre svg { grid-row: span 2; width: 18px; height: 18px; color: var(--tono-texto); }
.aj-tema-nombre b { color: var(--ink); font-size: 13.5px; font-weight: 650; }
.aj-tema-nombre small { color: var(--muted); font-size: 11.5px; }

/* La miniatura: una ventana del propio programa, dibujada con piezas. */
.ajustes .aj-tema-vista {
  position: relative;
  display: block;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(16, 28, 66, .1);
  border-radius: 9px;
  background: #eef1f6;
}
.aj-tema-vista i { position: absolute; display: block; border-radius: 3px; transition: transform .5s var(--ease); }
.aj-tema:hover .aj-tema-vista .tv-tarjeta { transform: translateY(-2px); }
.tv-lado { top: 0; bottom: 0; left: 0; width: 23%; border-radius: 0 !important; background: #fff linear-gradient(90deg, #009f9b 0 3px, transparent 3px) no-repeat 0 30% / 100% 12%; box-shadow: 1px 0 0 rgba(16, 28, 66, .07); }
.tv-titulo { top: 13%; left: 31%; width: 34%; height: 7%; background: #101c42; opacity: .85; }
.tv-tarjeta { top: 30%; left: 31%; width: 30%; height: 32%; border-radius: 5px !important; background: #fff; box-shadow: 0 2px 5px rgba(16, 28, 66, .1); }
.tv-tarjeta.dos { left: 65%; }
.tv-renglon { top: 72%; left: 31%; width: 62%; height: 6%; background: #d5dde9; }
.tv-renglon.corto { top: 84%; width: 38%; background: color-mix(in srgb, #009f9b 45%, #d5dde9); }
.ajustes .tv-dark { background: #121824; border-color: rgba(255, 255, 255, .08); }
.tv-dark .tv-lado { background-color: #1b2433; background-image: linear-gradient(90deg, #31d8ce 0 3px, transparent 3px); box-shadow: 1px 0 0 rgba(255, 255, 255, .05); }
.tv-dark .tv-titulo { background: #eff5ff; }
.tv-dark .tv-tarjeta { background: #1b2433; box-shadow: inset 0 0 0 1px #2c3a50; }
.tv-dark .tv-renglon { background: #2c3a50; }
.tv-dark .tv-renglon.corto { background: color-mix(in srgb, #31d8ce 45%, #2c3a50); }
/* Automático: la misma ventana, partida en diagonal. */
.ajustes .tv-auto { background: linear-gradient(118deg, #eef1f6 0 50%, #121824 50% 100%); }
.tv-auto .tv-tarjeta.dos { background: #1b2433; box-shadow: inset 0 0 0 1px #2c3a50; }
.tv-auto .tv-renglon { background: linear-gradient(90deg, #d5dde9 0 45%, #2c3a50 45%); }
.tv-auto .tv-renglon.corto { background: #d5dde9; }

/* La marca de escogido, compartida con las monedas. */
.aj-marca {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tono);
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: transform .3s var(--ease), opacity .2s ease;
}
.aj-marca svg { width: 12px; height: 12px; stroke-width: 3; }
.on > .aj-marca { opacity: 1; transform: none; }
.aj-tema > .aj-marca { top: 16px; right: 16px; }

/* ── Planilla y moneda ──────────────────────────────────────────────────── */
.aj-monedas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.aj-moneda {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  transition: border-color .2s ease, box-shadow .25s ease, transform .35s var(--ease);
}
.aj-moneda:hover { border-color: color-mix(in srgb, var(--tono) 45%, var(--line)); }
.aj-moneda.on { border-color: var(--tono); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 15%, transparent); }
.aj-moneda-simbolo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tono) 10%, transparent);
  color: var(--tono-texto);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.aj-moneda[data-moneda="MXN"] .aj-moneda-simbolo,
.aj-moneda[data-moneda="PAB"] .aj-moneda-simbolo,
.aj-moneda[data-moneda="NIO"] .aj-moneda-simbolo { font-size: 14px; }
.aj-moneda[data-moneda="COP"] .aj-moneda-simbolo { font-size: 12px; }
[data-theme="dark"] .aj-moneda-simbolo { background: color-mix(in srgb, var(--tono) 18%, transparent); }
.aj-moneda.on .aj-moneda-simbolo { background: color-mix(in srgb, var(--tono) 18%, transparent); }
[data-theme="dark"] .aj-moneda.on .aj-moneda-simbolo { background: color-mix(in srgb, var(--tono) 28%, transparent); }
.aj-moneda-texto { display: grid; gap: 1px; min-width: 0; padding-right: 18px; }
.aj-moneda-texto b { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.aj-moneda-texto small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.aj-ejemplo-monto { font-variant-numeric: tabular-nums; }

/* Las casillas de plata hacen campo a los símbolos de varias letras. */
.money-field input, .campo-money input { padding-left: max(26px, var(--simbolo-ancho, 0px)); }

/* ── Privacidad ─────────────────────────────────────────────────────────── */
.aj-espera { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; }
.aj-espera-dibujo { position: relative; height: 116px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.aj-espera-hoja { position: absolute; inset: 16px; display: grid; align-content: start; gap: 9px; animation: aj-velo 6s ease-in-out infinite; }
.aj-espera-hoja i { display: block; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.aj-espera-hoja i:nth-child(1) { width: 62%; background: color-mix(in srgb, var(--m-pagos) 40%, transparent); }
.aj-espera-hoja i:nth-child(2) { width: 88%; }
.aj-espera-hoja i:nth-child(3) { width: 48%; }
.aj-espera-velo { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tono-texto); }
.aj-espera-velo svg { box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); animation: aj-ojo 6s ease-in-out infinite; }
@keyframes aj-velo { 0%, 38% { filter: blur(0); opacity: 1; } 50%, 86% { filter: blur(3.5px); opacity: .5; } 100% { filter: blur(0); opacity: 1; } }
@keyframes aj-ojo { 0%, 38% { opacity: 0; transform: scale(.5); } 50%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.5); } }
.aj-espera-texto { display: grid; gap: 4px; min-width: 0; }
.aj-espera-texto > b { color: var(--ink); font-size: 15px; font-weight: 650; }
.aj-espera-texto > small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.aj-esperas.espera-opciones { margin: 10px 0 0; }
.ajustes .espera-opcion.puesta { border-color: var(--tono-texto); background: color-mix(in srgb, var(--tono) 13%, transparent); color: var(--tono-texto); }
.ajustes .espera-opcion:hover { border-color: var(--tono-texto); color: var(--tono-texto); }

/* ── Contraseña ─────────────────────────────────────────────────────────── */
.aj-llave {
  --estado: #12a05f;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--estado) 24%, var(--line));
  border-radius: 16px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--estado) 6%, var(--card)), var(--card) 60%);
}
.aj-llave.sin { --estado: #e08a12; }
.aj-llave-escudo {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 14px;
  color: var(--estado);
  background: color-mix(in srgb, var(--estado) 12%, transparent);
}
.aj-llave-escudo svg { width: 25px; height: 25px; stroke-width: 1.9; }
[data-theme="dark"] .aj-llave-escudo { color: color-mix(in srgb, var(--estado) 60%, #fff); background: color-mix(in srgb, var(--estado) 18%, transparent); }
.aj-llave-texto { display: grid; flex: 1; gap: 3px; min-width: 0; }
.aj-llave-texto b { color: var(--ink); font-size: 16px; font-weight: 680; }
.aj-llave-texto small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* ── Respaldos ──────────────────────────────────────────────────────────── */
.aj-destinos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.aj-destino {
  --d: #e08a12;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  transition: border-color .3s ease;
}
.aj-destino.nube { --d: #1597d0; }
.aj-destino::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--d) 8%, transparent), transparent 62%);
  transition: opacity .4s ease;
}
.aj-destino:hover { border-color: color-mix(in srgb, var(--d) 30%, var(--line)); }
.aj-destino header { display: flex; align-items: flex-start; gap: 14px; }
.aj-destino-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--d);
  background: color-mix(in srgb, var(--d) 11%, transparent);
}
.aj-destino-ico svg { width: 22px; height: 22px; stroke-width: 1.9; }
[data-theme="dark"] .aj-destino-ico { color: color-mix(in srgb, var(--d) 62%, #fff); background: color-mix(in srgb, var(--d) 18%, transparent); }
.aj-destino.nube:not(.conectada) .aj-destino-ico { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.aj-destino h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 660; letter-spacing: -.01em; }
.aj-destino p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.aj-destino p b { color: var(--ink); font-weight: 600; }
.aj-destino-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-destino-botones .button { flex: 1 1 auto; min-height: 40px; font-size: 13px; }

.aj-conteos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aj-conteo { display: grid; gap: 1px; min-width: 0; padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.aj-conteo:nth-child(3n) { border-right: 0; }
.aj-conteo:nth-last-child(-n + 3) { border-bottom: 0; }
.aj-conteo b { color: var(--ink); font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.aj-conteo small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

.aj-archivos { display: grid; }
.aj-archivo { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
.aj-archivo + .aj-archivo::before { content: ""; position: absolute; top: 0; right: 0; left: 60px; height: 1px; background: var(--line); }

/* ── Nube ───────────────────────────────────────────────────────────────── */
.aj-nube {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: radial-gradient(80% 140% at 0% 50%, color-mix(in srgb, var(--tono) 6%, transparent), transparent 65%), var(--card);
}
.aj-nube-dibujo { display: flex; align-items: center; }
.aj-nube-punto {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  color: var(--tono-texto);
}
.aj-nube-punto svg { width: 24px; height: 24px; stroke-width: 1.9; }
.aj-nube-punto:last-child { color: var(--muted); }
.aj-nube.conectada .aj-nube-punto:last-child { color: var(--tono-texto); animation: aj-flota 4s ease-in-out infinite; }
@keyframes aj-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.aj-nube-hilo { position: relative; flex: 1; height: 2px; margin: 0 8px; }
.aj-nube-hilo i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--muted) 45%, transparent) 0 6px, transparent 6px 12px); }
.aj-nube.conectada .aj-nube-hilo i { background: repeating-linear-gradient(90deg, var(--tono) 0 6px, transparent 6px 12px); background-size: 12px 2px; animation: aj-hilo .8s linear infinite; }
@keyframes aj-hilo { to { background-position: 12px 0; } }
.aj-nube-hilo em {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.aj-nube.conectada .aj-nube-hilo em { border-color: color-mix(in srgb, #12a05f 35%, transparent); color: #0a7d5a; }
[data-theme="dark"] .aj-nube.conectada .aj-nube-hilo em { color: #4ade80; }
.aj-nube-texto { display: grid; gap: 4px; min-width: 0; }
.aj-nube-texto > b { color: var(--ink); font-size: 16px; font-weight: 660; }
.aj-nube-texto > small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.aj-nube-texto small b { color: var(--ink); font-weight: 600; }

.aj-mensaje { margin: 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.aj-caja > .aj-mensaje { margin: 0 16px 14px; }
.aj-mensaje.bien { background: color-mix(in srgb, #12a05f 12%, transparent); color: #0a7d5a; }
.aj-mensaje.malo { background: color-mix(in srgb, #e5484d 11%, transparent); color: #b42318; }
[data-theme="dark"] .aj-mensaje.bien { color: #4ade80; }
[data-theme="dark"] .aj-mensaje.malo { color: #ff8b8b; }
.aj-guardar .button b svg.lucide-loader-circle { animation: aj-gira .9s linear infinite; }

.aj-desplegable { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--canvas) 38%, var(--card)); overflow: clip; }
[data-theme="dark"] .aj-desplegable { background: color-mix(in srgb, #0e1522 28%, var(--card)); }
.aj-desplegable > summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; color: var(--ink); font-size: 13.5px; font-weight: 600; list-style: none; cursor: pointer; }
.aj-desplegable > summary::-webkit-details-marker { display: none; }
.aj-desplegable > summary > svg { width: 17px; height: 17px; color: var(--tono-texto); }
.aj-desplegable > summary > svg:last-child { margin-left: auto; color: var(--muted); transition: transform var(--dur-2) var(--ease); }
.aj-desplegable[open] > summary > svg:last-child { transform: rotate(180deg); }
.aj-desplegable[open] > summary { border-bottom: 1px solid var(--line); }
.aj-sql { display: grid; gap: 12px; padding: 16px; }
.aj-sql p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.aj-sql p b { color: var(--ink); font-weight: 600; }
.aj-sql pre {
  max-height: 230px;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  border-radius: 10px;
  background: #0f172a;
  color: #d6e2f5;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  scrollbar-width: thin;
}
[data-theme="dark"] .aj-sql pre { background: #0a0f1a; box-shadow: inset 0 0 0 1px var(--line); }

/* ── Actualizaciones ────────────────────────────────────────────────────── */
.aj-version {
  --tono-texto: var(--tono);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--tono) 7%, transparent), transparent 60%), var(--card);
}
.aj-version.al-dia { --tono: #12a05f; }
.aj-version.sin-conexion { --tono: #e08a12; }
[data-theme="dark"] .aj-version { --tono-texto: color-mix(in srgb, var(--tono) 58%, #fff); }
.aj-version-anillo {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  color: var(--tono-texto);
  background: color-mix(in srgb, var(--tono) 11%, transparent);
  transition: background-color .4s ease, color .4s ease;
}
.aj-version-anillo svg { width: 32px; height: 32px; stroke-width: 1.8; }
[data-theme="dark"] .aj-version-anillo { background: color-mix(in srgb, var(--tono) 18%, transparent); }
.aj-version-anillo::after { content: ""; position: absolute; inset: -7px; border: 2px solid color-mix(in srgb, var(--tono) 26%, transparent); border-radius: 50%; }
.aj-version.buscando .aj-version-anillo::after { border-color: color-mix(in srgb, var(--tono) 14%, transparent); border-top-color: var(--tono); animation: aj-gira .9s linear infinite; }
.aj-version.nueva .aj-version-anillo { animation: aj-pulso 2.2s ease-in-out infinite; }
@keyframes aj-gira { to { transform: rotate(360deg); } }
@keyframes aj-pulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tono) 30%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
.aj-version-texto { display: grid; justify-items: start; min-width: 0; }
.aj-version-texto small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aj-version-texto > b { color: var(--ink); font-size: 34px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.aj-estado { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tono) 13%, transparent); color: var(--tono-texto); font-size: 12px; font-weight: 650; }
.aj-estado svg { width: 14px; height: 14px; animation: aj-gira .9s linear infinite; }
.aj-version-texto p { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.aj-version-botones { display: grid; gap: 8px; }
.aj-version-botones .button { min-height: 40px; }
.aj-version.buscando .aj-version-botones .button b svg { animation: aj-gira .9s linear infinite; }

.aj-pasos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px; list-style: none; }
.aj-pasos li { position: relative; display: grid; align-content: start; justify-items: start; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.aj-pasos li > span { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 7px; border-radius: 11px; background: color-mix(in srgb, var(--tono) 12%, transparent); color: var(--tono-texto); }
.aj-pasos li > span svg { width: 18px; height: 18px; }
.aj-pasos li:not(:last-child)::after { content: ""; position: absolute; top: 30px; right: -13px; width: 8px; height: 8px; border-top: 2px solid color-mix(in srgb, var(--muted) 50%, transparent); border-right: 2px solid color-mix(in srgb, var(--muted) 50%, transparent); transform: rotate(45deg); }
.aj-pasos b { color: var(--ink); font-size: 13px; font-weight: 650; }
.aj-pasos small { color: var(--muted); font-size: 12px; line-height: 1.45; }

.aj-hitos { display: grid; margin: 0; padding: 6px 16px; list-style: none; }
.aj-hito { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.aj-hito::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; width: 2px; background: var(--line); }
.aj-hito:first-child::before { top: 22px; }
.aj-hito:last-child::before { bottom: calc(100% - 22px); }
.aj-hito:only-child::before { display: none; }
.aj-hito-punto { position: relative; z-index: 1; width: 12px; height: 12px; margin: 5px 0 0 5px; border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 50%; background: var(--card); }
.aj-hito.esta .aj-hito-punto { border-color: #12a05f; background: #12a05f; box-shadow: 0 0 0 4px color-mix(in srgb, #12a05f 18%, transparent); }
.aj-hito.viene .aj-hito-punto { border-color: var(--tono); background: var(--tono); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 18%, transparent); }
.aj-hito > div { display: grid; gap: 2px; min-width: 0; }
.aj-hito b { color: var(--ink); font-size: 13.5px; font-weight: 650; }
.aj-hito small { color: var(--muted); font-size: 11.5px; }
.aj-hito ul { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 17px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* ── Acerca del sistema ─────────────────────────────────────────────────── */
.aj-acerca {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--teal) 6%, transparent), transparent 60%), var(--card);
}
.aj-acerca-logo { display: grid; place-items: center; flex: 0 0 auto; width: 70px; height: 70px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.ajustes .aj-acerca-logo img { width: 62px; height: 62px; margin: 0; object-fit: contain; }
.aj-acerca-logo .logo-vacio { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.aj-acerca-logo .logo-vacio b { font-size: 20px; }
.aj-acerca-logo .logo-vacio small { display: none; }
.aj-acerca > div { display: grid; flex: 1; gap: 1px; min-width: 0; }
.aj-acerca > div > b { color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.aj-acerca > div > small { color: var(--muted); font-size: 13px; }
.aj-acerca-version { margin-top: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.aj-espacio { display: grid; gap: 10px; padding: 16px; }
.aj-espacio-cifra { display: flex; align-items: baseline; gap: 8px; }
.aj-espacio-cifra b { color: var(--ink); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.aj-espacio-cifra small { color: var(--muted); font-size: 12.5px; }
.aj-espacio-barra { display: flex; height: 12px; overflow: hidden; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.aj-espacio-barra i { width: var(--parte); min-width: 0; animation: aj-barra 1.1s var(--ease) both; }
.aj-espacio-barra i + i { box-shadow: inset 2px 0 0 var(--card); }
@keyframes aj-barra { from { width: 0; } }
.aj-espacio-barra .planilla, .aj-espacio-leyenda .planilla::before { background: #0ea89b; }
.aj-espacio-barra .copias, .aj-espacio-leyenda .copias::before { background: #5a5fd0; }
.aj-espacio-barra .logo, .aj-espacio-leyenda .logo::before { background: #e08a12; }
.aj-espacio-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.aj-espacio-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.aj-espacio-leyenda span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
.aj-espacio.lleno .aj-espacio-cifra b { color: #c2353b; }

/* ── Restablecer ────────────────────────────────────────────────────────── */
.aj-peligro {
  --rojo: #dc3f45;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--rojo) 26%, var(--line));
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rojo) 7%, var(--card)), var(--card) 75%);
}
.aj-peligro-cabeza { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.aj-peligro-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: var(--rojo);
  background: color-mix(in srgb, var(--rojo) 11%, transparent);
}
.aj-peligro-ico svg { width: 22px; height: 22px; stroke-width: 1.9; }
[data-theme="dark"] .aj-peligro-ico { color: #ff8b8b; background: color-mix(in srgb, var(--rojo) 18%, transparent); }
.aj-peligro-cabeza > div { display: grid; gap: 3px; }
.aj-peligro-cabeza b { color: var(--ink); font-size: 15px; font-weight: 680; }
.aj-peligro-cabeza small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.aj-peligro-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--rojo) 16%, var(--line)); }
.aj-balance { min-width: 0; padding: 14px 20px 16px; }
.aj-balance + .aj-balance { border-left: 1px solid color-mix(in srgb, var(--rojo) 16%, var(--line)); }
.aj-balance h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aj-balance h4 svg { width: 15px; height: 15px; }
.aj-balance.borra h4 { color: #c2353b; }
.aj-balance.queda h4 { color: #0a7d5a; }
[data-theme="dark"] .aj-balance.borra h4 { color: #ff8b8b; }
[data-theme="dark"] .aj-balance.queda h4 { color: #4ade80; }
.aj-balance ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.aj-balance li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; color: var(--ink); font-size: 12.5px; }
.aj-balance li b { font-variant-numeric: tabular-nums; font-weight: 650; }
.aj-balance.queda li svg { flex: 0 0 auto; width: 15px; height: 15px; color: #12a05f; }

.aj-reset { overflow: clip; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--e1); }
.aj-paso { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 18px 20px; transition: opacity .35s ease, filter .35s ease; }
.aj-paso + .aj-paso { border-top: 1px solid var(--line); }
.aj-paso[data-cfg-paso2]:not(.on) { opacity: .45; filter: saturate(.3); }
.aj-paso-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); font-size: 13px; font-weight: 700; transition: background-color .3s ease, color .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.aj-paso.on .aj-paso-num { background: #dc3f45; color: #fff; }
.aj-paso[data-cfg-paso2].on .aj-paso-num { transform: scale(1.08); }
.aj-paso-cuerpo { display: grid; gap: 10px; min-width: 0; }
.aj-paso-dentro { display: grid; gap: 10px; min-width: 0; }
.aj-paso-cuerpo > label { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.aj-reset input[data-cfg-palabra] {
  width: min(340px, 100%);
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .14em;
}
.aj-letras { display: flex; flex-wrap: wrap; gap: 4px; }
.aj-letras i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  transition: background-color .2s ease, color .2s ease;
}
.aj-letras i.bien { background: #dc3f45; color: #fff; }
.aj-letras i.mal { background: color-mix(in srgb, #e5484d 14%, transparent); color: #b42318; animation: aj-tiembla .32s ease; }
[data-theme="dark"] .aj-letras i.mal { color: #ff8b8b; }
@keyframes aj-tiembla { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.aj-reset .cfg-note { margin: 0; }
.aj-reset .aj-paso-dentro > .button { justify-self: start; }
.aj-guardar.peligro { padding: 14px 20px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 45%, var(--card)); }
[data-theme="dark"] .aj-guardar.peligro { background: rgba(0, 0, 0, .12); }
.button.aj-boton-peligro { color: #fff; background: linear-gradient(135deg, #e5484d, #c9343a); box-shadow: 0 6px 14px rgba(220, 63, 69, .26); }
.button.aj-boton-peligro:not(:disabled):hover { box-shadow: 0 10px 22px rgba(220, 63, 69, .36); }
.button.aj-boton-peligro:disabled { box-shadow: none; cursor: not-allowed; opacity: .42; filter: grayscale(.35); }
.button.aj-boton-peligro.esperando b svg { animation: aj-gira .9s linear infinite; }

/* Instalando una versión: un velo corto mientras la página se recarga. */
html[data-instalando] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--canvas) 55%, transparent);
  backdrop-filter: blur(6px);
  animation: aj-velo-instalar .5s ease both;
}
@keyframes aj-velo-instalar { from { opacity: 0; } }

/* ═══ Anchos ═══════════════════════════════════════════════════════════════
   Con ventana angosta el índice se vuelve una columna de fichas con el
   nombre abajo, como la barra de una app de escritorio chica. Adentro de la
   sección, lo que manda es el ancho del PANEL, no el de la ventana. */
@media (max-width: 1240px) {
  /* La misma lista, más angosta y con el nombre corto: "Planilla" en vez de
     "Planilla y moneda". Se lee igual de bien, solo ocupa menos. */
  .ajustes { --aj-indice: 212px; }
  .aj-indice { padding: 14px 8px 14px; }
  .aj-item-nombre .largo { display: none; }
  .aj-item-nombre .corto { display: inline; }
  .aj-panel { --aj-lado: 24px; padding-bottom: 28px; }
  /* En esta pestaña la página aprieta menos los lados: el ancho que sobra se
     lo lleva la sección, que es donde está el contenido. */
  html:has(.ajustes) .content { padding-left: 24px; padding-right: 24px; }
}

@container aj-panel (max-width: 760px) {
  .aj-dos { grid-template-columns: minmax(0, 1fr); }
  .aj-vista { position: static; max-width: 420px; }
}
@container aj-panel (max-width: 700px) {
  .aj-campos { grid-template-columns: minmax(0, 1fr); }
  .aj-monedas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aj-destinos { grid-template-columns: minmax(0, 1fr); }
  .aj-pasos { grid-template-columns: minmax(0, 1fr); }
  .aj-pasos li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  .aj-pasos li > span { grid-row: span 2; margin: 0; }
  .aj-pasos li:not(:last-child)::after { display: none; }
  .aj-version { grid-template-columns: auto minmax(0, 1fr); }
  .aj-version-botones { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .aj-nube { grid-template-columns: minmax(0, 1fr); }
  .aj-nube-dibujo { max-width: 300px; }
  .aj-espera { grid-template-columns: minmax(0, 1fr); }
  .aj-espera-dibujo { max-width: 220px; }
  .aj-peligro-columnas { grid-template-columns: minmax(0, 1fr); }
  .aj-balance + .aj-balance { border-top: 1px solid color-mix(in srgb, #dc3f45 16%, var(--line)); border-left: 0; }
  .aj-conteo { padding: 10px 12px; }
  .aj-conteo b { font-size: 16px; }
  .aj-acerca { flex-wrap: wrap; }
  .aj-acerca > .button { width: 100%; }
}
@container aj-panel (max-width: 520px) {
  .aj-logo { flex-direction: column; align-items: flex-start; }
  .aj-fila { flex-wrap: wrap; }
  .aj-fila-texto { flex-basis: calc(100% - 46px); }
  .aj-fila-control { flex-wrap: wrap; width: 100%; padding-left: 46px; }
  .aj-fila:has(.aj-fila-ico) .aj-fila-control:has(.aj-interruptor, .aj-dato) { width: auto; padding-left: 46px; }
  .aj-temas { gap: 8px; padding: 12px; }
  .aj-tema-nombre small { display: none; }
  .aj-monedas { grid-template-columns: minmax(0, 1fr); }
  .aj-llave { flex-wrap: wrap; }
  .aj-llave > .button { width: 100%; }
  .aj-cabeza h2 { font-size: 22px; }
  .aj-ficha.grande { width: 48px; height: 48px; border-radius: 14px; }
}

/* ═══ Menos movimiento ═══════════════════════════════════════════════════
   "Reducir animaciones" (Configuración › Apariencia) apaga el movimiento en
   TODO el programa, no solo aquí. El color y las sombras siguen cambiando. */
html[data-movimiento="reducido"] *,
html[data-movimiento="reducido"] *::before,
html[data-movimiento="reducido"] *::after {
  animation-duration: .001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .ajustes *, .ajustes *::before, .ajustes *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ═══════════ Las cuentas ═══════════
   Los cuadros de agregar y cambiar una cuenta. El papel se escoge con fichas
   que dicen qué puede hacer cada uno, y no con una lista desplegable: el
   nombre "asistente" solo no le dice a nadie si puede pagar o no. */
.cuenta-papeles { display: grid; gap: 8px; min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.cuenta-papeles legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cuenta-papel {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}
.cuenta-papel:has(input:checked) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, transparent); }
.cuenta-papel input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--teal); }
.cuenta-papel b { display: block; color: var(--ink); font-size: 14px; }
.cuenta-papel small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.cuenta-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }