/* flots · css/paginas/est-ajustes.css
   Estudio · Ajustes (/estudio/ajustes) — pantalla nueva con el lenguaje del estudio:
   tarjetas blancas planas (24/28), títulos 22/500 con línea, campos de componentes.css.
   Clases propias con prefijo .est-aj-. */

.est-aj-form{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}

/* ---------- Tarjetas ---------- */
.est-aj-tarjeta{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:24px 28px;
  background:var(--surface);
}
.est-aj-tarjeta-cabeza{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.est-aj-tarjeta-titulo{ margin:0; font-size:22px; font-weight:500; line-height:1.2; }
.est-aj-tarjeta-sub{ margin:0; font-size:14px; line-height:1.45; color:var(--muted); }
.est-aj-tarjeta-cuerpo{
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
  padding-top:22px;
}

.est-aj-campos{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px 24px;
  min-width:0;
}
.est-aj-campo-ancho{ grid-column:1 / -1; }

.est-aj-texto{ margin:0; font-size:15px; line-height:1.5; color:var(--text-body); }
.est-aj-texto a{ text-underline-offset:2px; }
.est-aj-vacio{ margin:0; font-size:15px; line-height:1.5; color:var(--muted); }

/* ---------- Aviso de rangos de ejemplo ---------- */
.est-aj-alerta .alerta-accion .btn-texto{ font-weight:500; color:var(--ink); }
.est-aj-sin-corte{ white-space:nowrap; }

/* ---------- Rangos de presupuesto ---------- */
.est-aj-rangos{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.est-aj-rangos-lista{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  list-style:none;
}
.est-aj-rango{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.est-aj-rango:first-child{ padding-top:0; }
.est-aj-rango-grupo{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.est-aj-rango-titulo{
  margin-bottom:10px;
  padding:0;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.02em;
  color:var(--muted);
}
.est-aj-rango-marca{ font-weight:500; color:var(--danger); }
.est-aj-rango-campos{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 16px;
  min-width:0;
}
.est-aj-rango-campos .campo-control{ height:48px; padding:0 14px; }
.est-aj-rango-campos .campo-etiqueta{ font-size:14px; }

/* Alinea los botones con el control (no con el texto de error, si lo hay) */
.est-aj-rango-acciones{
  display:flex;
  align-items:center;
  gap:2px;
  height:48px;
  align-self:start;
  margin-top:calc(13px * 1.4 + 10px + 14px * 1.35 + 8px);
}
.est-aj-icono{ width:40px; height:40px; color:var(--ink-3); }
.est-aj-icono:hover:not(:disabled){ color:var(--ink); background:var(--bg); }
.est-aj-icono:disabled{ color:var(--disabled); cursor:not-allowed; }
.est-aj-icono-subir .icono{ transform:rotate(-90deg); }
.est-aj-icono-bajar .icono{ transform:rotate(90deg); }
.est-aj-icono-quitar:hover:not(:disabled){ color:var(--danger); }

.est-aj-agregar{ gap:6px; }

/* ---------- Barra de guardado (con cambios sin guardar queda pegada abajo, a la vista) ---------- */
.est-aj-barra{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px 24px;
  padding:16px 28px;
  background:var(--surface);
  border-top:1px solid var(--line);
}
.est-aj-barra-sucia{ position:sticky; bottom:0; z-index:5; border-top-color:var(--ink); box-shadow:0 -8px 24px rgba(29, 29, 27, .06); }
.est-aj-barra-estado{ margin:0; font-size:14px; line-height:1.45; color:var(--muted); }
.est-aj-barra-estado:focus{ outline:none; }
/* Con la barra pegada abajo, el campo enfocado con Tab no queda tapado por ella */
.est-aj-form input,
.est-aj-form button,
.est-aj-form a{ scroll-margin-bottom:112px; }
.est-aj-barra-sucia .est-aj-barra-estado{ color:var(--ink); font-weight:500; }
.est-aj-barra-botones{ display:flex; align-items:center; gap:20px; margin-left:auto; }

/* ---------- Modo demo ---------- */
.est-aj-demo{ border-left:4px solid var(--ink); }
.est-aj-demo-fila{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px 24px;
}
.est-aj-demo-fila .est-aj-texto{ flex:1 1 320px; }
.est-aj-demo-btn{ flex-shrink:0; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px){
  .est-aj-campos{ gap:20px; }
}

/* ---------- Celular ---------- */
@media (max-width: 767px){
  .est-aj{ gap:20px; }
  .est-aj-form{ gap:16px; }
  .est-aj-tarjeta{ padding:20px 16px; }
  .est-aj-tarjeta-titulo{ font-size:19px; }
  .est-aj-tarjeta-cuerpo{ gap:18px; padding-top:18px; }
  .est-aj-campos{ grid-template-columns:minmax(0, 1fr); gap:18px; }
  .est-aj-rango{ grid-template-columns:minmax(0, 1fr); gap:8px; }
  .est-aj-rango-campos{ grid-template-columns:minmax(0, 1fr); }
  .est-aj-rango-acciones{ height:auto; margin-top:0; justify-content:flex-end; }
  .est-aj-barra{
    bottom:calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom, 0px));
    padding:12px 16px;
  }
  .est-aj-barra-botones{ gap:16px; }
  /* barra (≈67 px) + barra inferior del estudio */
  .est-aj-form input,
  .est-aj-form button,
  .est-aj-form a{ scroll-margin-bottom:calc(var(--alto-barra-inferior, 76px) + 96px); }
  /* Con cambios: la barra queda en una sola línea (el aviso sigue para lectores de pantalla) */
  .est-aj-barra-sucia .est-aj-barra-estado{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  /* componentes.css (celular) le da a todo .btn alto 52: el link de texto vuelve a su tamaño */
  .est-aj .btn-texto{ height:auto; min-height:40px; padding:0; }
  .est-aj-demo-btn{ width:100%; }
}