/* ============================================================
   ajustes.css — los bloques plegables de la pantalla de Ajustes.

   Antes todo salía desplegado, uno detrás de otro, y lo de más abajo
   se acababa olvidando. Ahora se ven los ocho títulos de un vistazo y
   cada uno se abre cuando hace falta.
   ============================================================ */

.bloque-ajustes {
  border: 1px solid #dde3ea;
  border-radius: 10px;
  margin: 10px 0;
  background: #fff;
}

/* El aviso discreto en el botón de Ajustes de la barra, cuando hay
   fichas sin carpeta. */
.punto-ambar {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ambar-linea); margin-left: 6px; vertical-align: middle;
}

.bloque-ajustes > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: 10px;
}

/* La flecha de siempre, dibujada a mano para que gire al abrir. */
.bloque-ajustes > summary::-webkit-details-marker { display: none; }
.bloque-ajustes > summary::before {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid #5d6b7a;
  border-bottom: 2px solid #5d6b7a;
  transform: rotate(-45deg);
  transition: transform .15s;
  flex: none;
  position: relative; top: -2px;
}
.bloque-ajustes[open] > summary::before { transform: rotate(45deg); top: -4px; }

.bloque-ajustes > summary:hover { background: #f4f7fa; }

.bloque-titulo { font-size: 15px; font-weight: 600; }
.bloque-pie { font-size: 12px; color: #5d6b7a; }

.bloque-cuerpo { padding: 0 16px 16px; border-top: 1px solid #eef1f5; }
.bloque-cuerpo > *:first-child { margin-top: 14px; }

@media (max-width: 900px) {
  .bloque-ajustes > summary { padding: 12px; }
  .bloque-pie { width: 100%; }
}

/* ============================================================
   Ajustes ágiles (11-sep-2026): encontrar y crear tipos sin scroll.
   docs/AJUSTES-AGIL.md
   ============================================================ */

/* Ajustes aprovecha el ancho: el título de la cabecera y el cuerpo de
   los bloques terminan en el mismo borde, con el mismo relleno lateral
   que usa `.bloque-ajustes > summary` y `.bloque-cuerpo`. */
#pantalla-ajustes > .cabecera { padding: 0 16px; }
#pantalla-ajustes .explica, #pantalla-tipo-asunto .explica { max-width: 90ch; }

/* ============================================================
   Las tres pestañas de Ajustes (17-sep-2026, fila 39,
   docs/AJUSTES-POR-TIPO.md): Tipos de asunto · El centro ·
   Mantenimiento. Mismo lenguaje visual que .pestana-categoria, un
   escalón más arriba. La pestaña abierta se recuerda en localStorage,
   igual que la categoría (App.cambiarPestanaAjustes).
   ============================================================ */
/* La cabecera de Ajustes es solo el título (index.html); estas
   pestañas se quedan pegadas justo debajo de ella, encogida o no
   —"--cabecera-fija-alto" la pone js/cabecera-fija.js al medirla—,
   para que "Tipos de asunto · El centro · Mantenimiento" no se pierda
   al bajar (docs/CABECERA-QUE-SE-QUEDA.md, tabla del punto 2). */
.pestanas-ajustes {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px 0; margin-bottom: 16px;
  position: sticky; top: var(--cabecera-fija-alto, 0px); z-index: 19;
  background: var(--fondo);
}
.pestana-ajustes {
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--papel); color: var(--tinta-suave);
  border: 1px solid var(--linea); border-radius: 20px;
  padding: 8px 18px; cursor: pointer;
}
.pestana-ajustes:hover { border-color: #b9c6d6; color: var(--tinta); }
.pestana-ajustes.activa { background: var(--azul); border-color: var(--azul); color: #fff; }

.ajustes-tab { padding: 0 16px; }

/* ============================================================
   La pantalla propia de un tipo de asunto: dos columnas densas, una
   sola por debajo de 1000px. Cada sección es un bloque igual que los
   de Ajustes (mismo borde, mismo título), pero siempre desplegado:
   nada que abrir ni cerrar, las siete se ven de una vez.
   ============================================================ */
#pantalla-tipo-asunto > .cabecera { padding: 0 16px; align-items: baseline; }

.tipo-asunto-columnas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 0 16px 40px;
  align-items: start;
}
@media (max-width: 1000px) {
  .tipo-asunto-columnas { grid-template-columns: 1fr; }
}
.tipo-asunto-columna { display: flex; flex-direction: column; gap: 16px; }

.tipo-asunto-seccion {
  border: 1px solid #dde3ea; border-radius: 10px; background: #fff;
  padding: 14px 16px;
}
.tipo-asunto-seccion h3 {
  margin: 0 0 4px; font-size: 15px; font-weight: 600;
}
.tipo-asunto-seccion .bloque-pie { display: block; margin-bottom: 10px; }
.tipo-asunto-seccion .explica { margin-bottom: 10px; }

/* El aviso ámbar de "también se usa en otros tipos" (Campos.
   tiposQueUsanPropio / tiposQueUsanCalculado), dentro de la sección
   Campos. */
.aviso-compartido {
  font-size: 12px; color: #8a6100; margin-top: 2px;
}

/* ---------- el panel de "+ Añadir campo" (fila 56, 18-sep-2026,
   docs/CAMPOS-CATALOGO-Y-CALCULADOS.md), js/campos-catalogo.js y
   js/campos-calculados-editor.js ---------- */
.campos-catalogo-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.campos-propio-form, .campos-calc-form {
  margin: 8px 0; padding: 10px 12px;
  border: 1px solid #d7dee6; border-radius: 8px; background: #f7f9fb;
}
.campos-calc-categorias {
  display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px;
}

/* ---------- el aviso en vivo, al escribir un nombre nuevo ---------- */
.aviso-en-vivo {
  font-size: 13px;
  margin: -4px 0 12px;
  min-height: 18px;
}
.aviso-en-vivo:empty { margin: 0; min-height: 0; }
.aviso-en-vivo-malo { color: var(--rojo-linea); font-weight: 600; }
.aviso-en-vivo-ambar { color: #8a6100; font-weight: 600; }
.aviso-en-vivo .enlace { font-size: inherit; font-weight: 600; margin-left: 4px; }

/* ---------- pestañas de categoría + buscador ---------- */
.tipos-cabecera {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.pestanas-categoria { display: flex; flex-wrap: wrap; gap: 6px; }
.pestanas-categoria.apagadas { opacity: .4; pointer-events: none; }
.pestana-categoria {
  font: inherit; font-size: 13px; font-weight: 600;
  background: var(--papel); color: var(--tinta-suave);
  border: 1px solid var(--linea); border-radius: 20px;
  padding: 7px 14px; cursor: pointer; display: flex; align-items: center; gap: 7px;
}
.pestana-categoria:hover { border-color: #b9c6d6; color: var(--tinta); }
.pestana-categoria.activa {
  background: var(--azul); border-color: var(--azul); color: #fff;
}
.pestana-cuenta {
  background: #eef1f5; color: var(--tinta); border-radius: 20px;
  padding: 1px 8px; font-size: 11.5px; font-weight: 700;
}
.pestana-categoria.activa .pestana-cuenta { background: rgba(255,255,255,.25); color: #fff; }

.buscar-tipos { flex: 1 1 260px; max-width: 340px; }

.tipos-buscando-info { margin: -4px 0 10px; font-size: 13px; }

/* ---------- la rejilla de tarjetas: tipos, estados y tipos de documento ---------- */
.rejilla-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.rejilla-tipos > .vacio { grid-column: 1 / -1; }

.tarjeta-tipo {
  position: relative;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  padding: 9px 40px 9px 14px;
  min-height: 64px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.tarjeta-tipo-linea {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* La tarjeta de un tipo de asunto se pulsa entera para abrir su
   pantalla (17-sep-2026, fila 39): solo esta lleva el cursor de mano y
   un resalte de foco, para no confundirla con las de estados o tipos
   de documento, que no abren nada al pulsarlas. */
.tarjeta-tipo-pulsable { cursor: pointer; }
.tarjeta-tipo-pulsable:hover { border-color: #b9c6d6; }
.tarjeta-tipo-pulsable:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.tarjeta-tipo-nombre { font-weight: 600; }
.tarjeta-tipo-antes { font-size: 12px; }
.tarjeta-tipo-sub { font-size: 12px; }
.tarjeta-tipo .plazo-tipo { display: flex; align-items: center; gap: 6px; }
.tarjeta-tipo .campo-plazo { width: 62px; }

/* Se destella un instante al llegar desde "Verlo", en el aviso de
   duplicado: así se ve cuál es, sin tener que buscarla en la rejilla. */
.tarjeta-tipo.destello { animation: destelloTipo 1s ease-out; }
@keyframes destelloTipo {
  0% { background: var(--ambar); border-color: var(--ambar-linea); }
  100% { background: var(--papel); border-color: var(--linea); }
}

/* ---------- el menú de los tres puntos ---------- */
.tarjeta-tipo-menu-envoltorio { position: absolute; top: 6px; right: 4px; }
.tarjeta-tipo-menu-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; background: transparent; border: 0; border-radius: 6px;
  color: var(--tinta-suave); cursor: pointer;
}
.tarjeta-tipo-menu-btn:hover { background: #eef1f5; color: var(--tinta); }
.tarjeta-tipo-menu {
  position: absolute; top: 30px; right: 0; z-index: 8;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  box-shadow: var(--sombra); min-width: 168px; padding: 4px;
  display: flex; flex-direction: column;
}
.tarjeta-tipo-menu button {
  font: inherit; font-size: 13.5px; text-align: left; background: none; border: 0;
  border-radius: 6px; padding: 8px 10px; cursor: pointer; color: var(--tinta);
}
.tarjeta-tipo-menu button:hover { background: #f0f3f7; }
.tarjeta-tipo-menu button.boton-peligro { color: var(--rojo-linea); }

@media (max-width: 900px) {
  .tipos-cabecera { flex-direction: column; align-items: stretch; }
  .buscar-tipos { max-width: none; }
}

/* ---------- el cuadro de "Insertar hueco" ----------

   17-sep-2026, docs/HUECOS-INSERTAR.md. Sustituye al muro de más de
   treinta botones que se pintaba encima del texto de una plantilla.
   Va colgado del <body>, con position:fixed, por encima de la capa
   del cuadro de la plantilla (z-index 50) y por debajo de los
   mensajes de abajo a la derecha (60). Quien lo pinta:
   js/huecos-buscador.js. */
.boton-hueco { padding: 5px 10px; font-size: 13px; }

.etiqueta-con-boton {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.etiqueta-con-boton .etiqueta { margin-bottom: 0; }

.huecos-cuadro {
  position: fixed; z-index: 55;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10,25,45,.25);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.huecos-cuadro .huecos-buscar { width: 100%; }

.huecos-lista {
  max-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.huecos-opcion {
  font: inherit; text-align: left; background: none; border: 0;
  border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--tinta);
  display: flex; flex-direction: column; gap: 1px;
}
.huecos-opcion:hover { background: #f0f3f7; }
.huecos-opcion.elegido { background: var(--azul-claro); }
.huecos-nombre { font-size: 14px; }
.huecos-codigo { font-size: 12px; color: var(--tinta-suave); font-family: ui-monospace, Consolas, monospace; }

.huecos-vacio { padding: 10px 8px; color: var(--tinta-suave); font-size: 13.5px; }
.huecos-pie { margin: 0; padding: 0 4px 2px; font-size: 12px; color: var(--tinta-suave); }