/* ===================================================================
   estructura.css  —  FORMA (layout, tamaños, tipografía, sombras)
   -------------------------------------------------------------------
   NO define colores: consume variables var(--bdr-*) que declara el
   fichero de tema activo en css/temas/*.css (uno por tema).
   Nomenclatura de variables compatible con el proyecto `codigo`.
   La familia tipográfica vive en el tema (--bdr-font-*); aquí solo
   se cargan las fuentes y se aplican.
   =================================================================== */

/* Utilidad global de visibilidad */
.oculto { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;600&family=Raleway:wght@400;600;800&family=Nunito+Sans:wght@400;700;800&display=swap');

/* ---- Reset ligero ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--bdr-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--bdr-bg);
  color: var(--bdr-text);
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ===================================================================
   Layout principal de acceso (split: marca | formulario)
   =================================================================== */
.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

/* ---- Panel de marca ---- */
.acceso__marca {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px;
  overflow: hidden;
  background: var(--bdr-marca-bg);
  color: var(--bdr-marca-text);
}

.marca { max-width: 460px; margin-top: 8vh; }

.marca__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.marca__logo-texto {
  font-family: var(--bdr-font-heading);
  font-size: 46px;
  font-weight: 600;
  letter-spacing: 1px;
}

.marca__logo-punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bdr-marca-accent);
}

.marca__producto {
  margin: 4px 0 40px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  opacity: 0.85;
}

.marca__claim {
  margin: 0 0 18px;
  font-family: var(--bdr-font-heading);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.25;
}

.marca__sub {
  margin: 0;
  font-size: 16px;
  max-width: 420px;
  opacity: 0.82;
}

.marca__pie {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

/* ---- Panel de formulario ---- */
.acceso__formulario {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 32px;
}

/* ===================================================================
   Tarjeta de login
   =================================================================== */
.tarjeta {
  width: 100%;
  max-width: 380px;
  padding: 40px 36px;
  border-radius: 16px;
  border: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  box-shadow: var(--bdr-shadow-lg);
}

.tarjeta__cabecera { margin-bottom: 28px; }

.tarjeta__titulo {
  margin: 0 0 6px;
  font-family: var(--bdr-font-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--bdr-dark);
}

.tarjeta__subtitulo {
  margin: 0;
  font-size: 14px;
  color: var(--bdr-text-muted);
}

.tarjeta__pie {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--bdr-gray-light);
  font-size: 13px;
  text-align: center;
  color: var(--bdr-text-muted);
}
.tarjeta__pie .enlace { margin-left: 6px; }

/* ===================================================================
   Mensaje de error
   =================================================================== */
.mensaje-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--bdr-red);
  color: var(--bdr-red);
  background: transparent;
}
.mensaje-error.oculto { display: none; }

.mensaje-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--bdr-cyan);
  color: var(--bdr-dark);
  background: transparent;
}
.mensaje-info.oculto { display: none; }

/* ===================================================================
   Formulario y campos
   =================================================================== */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.campo { display: flex; flex-direction: column; gap: 7px; }

.campo__etiqueta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--bdr-primary);
}

.campo__control {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  font-family: var(--bdr-font-body);
  border-radius: 10px;
  border: 1px solid var(--bdr-gray-light);
  background: var(--bdr-input-bg);
  color: var(--bdr-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo__control::placeholder { color: var(--bdr-placeholder); }

.campo__control--check {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.campo__check {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--bdr-accent);
}

.campo__control:focus {
  outline: none;
  border-color: var(--bdr-accent);
  box-shadow: 0 0 0 3px var(--bdr-accent-halo);
}

.campo__grupo { position: relative; display: flex; align-items: center; }
.campo__grupo .campo__control { padding-right: 48px; }

.campo__accion {
  position: absolute;
  right: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--bdr-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.campo__accion:hover { background: var(--bdr-accent-halo); color: var(--bdr-accent-hover); }
.campo__accion svg { width: 18px; height: 18px; }

/* Ocultar el botón de revelar contraseña nativo del navegador */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-credentials-auto-fill-button { display: none; }

/* ── Autocomplete personalizado ────────────────────────────────────── */
.ac-lista {
  list-style: none;
  margin: 2px 0 0;
  padding: 4px 0;
  border: 1px solid var(--bdr-primary);
  background: var(--bdr-white);
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  font-size: 13px;
  min-width: 120px;
}
.ac-lista__op {
  padding: 7px 14px;
  cursor: pointer;
  color: var(--bdr-text);
  white-space: nowrap;
}
.ac-lista__op:hover {
  background: var(--bdr-gray-light);
  color: var(--bdr-primary);
}

/* ---- Opciones (recordar / olvido) ---- */
.formulario__opciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-top: -2px;
}

.recordar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bdr-text-muted);
  cursor: pointer;
}
.recordar__check { width: 16px; height: 16px; accent-color: var(--bdr-accent); }

.enlace {
  color: var(--bdr-accent);
  font-weight: 600;
  transition: color 0.15s ease;
}
.enlace:hover { color: var(--bdr-accent-hover); text-decoration: underline; }

/* ===================================================================
   Botones
   =================================================================== */
.boton {
  height: 48px;
  width: 100%;
  border: none;
  border-radius: 10px;
  font-family: var(--bdr-font-button);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}
.boton:active { transform: translateY(1px); }
.boton.cargando { opacity: 0.65; pointer-events: none; }

.boton--primario {
  background: var(--bdr-accent);
  color: var(--bdr-accent-text);
}
.boton--primario:hover { background: var(--bdr-accent-hover); }

/* ---- Aviso legal ---- */
.aviso-legal {
  margin: 0;
  font-size: 12px;
  color: var(--bdr-text-muted);
}

/* ===================================================================
   Selector de tema (pastilla en línea, dentro de la barra superior)
   =================================================================== */
.selector-tema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  box-shadow: var(--bdr-shadow-sm);
}

/* Contenedor flotante (solo en la pantalla de login, que no tiene barra) */
.topbar-flotante {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
}
.selector-tema__etiqueta {
  font-size: 12px;
  font-weight: 600;
  color: var(--bdr-text-muted);
}
.selector-tema__control {
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--bdr-primary);
  cursor: pointer;
}
.selector-tema__control:focus { outline: none; }

/* ===================================================================
   PANTALLA PRINCIPAL (menú / dashboard)
   =================================================================== */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bdr-bg);
}

/* ---- Cabecera ---- */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 32px;
  border-bottom: 3px solid var(--bdr-accent);
  background: var(--bdr-white);
  box-shadow: var(--bdr-shadow-sm);
}

.cabecera__marca {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.cabecera__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--bdr-font-heading);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--bdr-dark);
}
.cabecera__logo-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bdr-accent);
}
.cabecera__producto {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bdr-text-muted);
}

.cabecera__usuario {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--bdr-text-muted);
}
.usuario-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--bdr-accent-halo);
  color: var(--bdr-accent-hover);
}
.boton-salir {
  border: 1px solid var(--bdr-gray-light);
  background: transparent;
  color: var(--bdr-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.boton-salir:hover { border-color: var(--bdr-accent); color: var(--bdr-accent-hover); }

/* ---- Lado izquierdo de la cabecera (marca + migas) ---- */
.cabecera__izq {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

/* ---- Migas de pan (breadcrumb) ---- */
.migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
}
.migas__sep {
  color: var(--bdr-gray-light);
  user-select: none;
}
.migas__item {
  color: var(--bdr-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.migas__item:hover { color: var(--bdr-accent-hover); }
.migas__item--actual {
  color: var(--bdr-primary);
  font-weight: 700;
}

/* ---- Botón de icono (campana) ---- */
.icono-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  color: var(--bdr-text-muted);
  box-shadow: var(--bdr-shadow-sm);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.icono-btn:hover { border-color: var(--bdr-accent); color: var(--bdr-accent-hover); }
.icono-btn svg { width: 18px; height: 18px; }
/* Punto de aviso (para cuando haya alertas) */
.icono-btn__punto {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bdr-red);
  border: 2px solid var(--bdr-white);
  display: none;
}
.icono-btn[data-alertas]:not([data-alertas="0"]) .icono-btn__punto { display: block; }
/* Animación del botón Refrescar mientras recarga */
.icono-btn.girando { pointer-events: none; }
.icono-btn.girando svg { animation: bdr-girar 0.7s linear infinite; }
@keyframes bdr-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- Menú de perfil ---- */
.perfil { position: relative; }
.perfil__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  color: var(--bdr-primary);
  box-shadow: var(--bdr-shadow-sm);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.perfil__btn:hover { border-color: var(--bdr-accent); }
.perfil__nombre { font-size: 13px; font-weight: 600; }
.perfil__chevron { width: 14px; height: 14px; color: var(--bdr-text-muted); }

/* ---- Desplegables (perfil y campana) ---- */
.menu-flotante {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  box-shadow: var(--bdr-shadow-md);
  z-index: 30;
}
.menu-flotante.oculto { display: none; }
.menu-flotante__cab {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--bdr-gray-light);
  margin-bottom: 6px;
}
.menu-flotante__nombre { font-size: 14px; font-weight: 700; color: var(--bdr-primary); }
.menu-flotante__rol { font-size: 12px; color: var(--bdr-text-muted); margin-top: 2px; }
.menu-flotante__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--bdr-primary);
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-flotante__item:hover { background: var(--bdr-accent-halo); color: var(--bdr-accent-hover); }
.menu-flotante__item svg { width: 16px; height: 16px; }
.menu-flotante__vacio {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--bdr-text-muted);
  text-align: center;
}

/* ---- Contenido ---- */
.contenido {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px 56px;
}
.contenido__titulo {
  margin: 0 0 4px;
  font-family: var(--bdr-font-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--bdr-dark);
}
.contenido__subtitulo {
  margin: 0 0 32px;
  font-size: 15px;
  color: var(--bdr-text-muted);
}

/* ---- Rejilla de tarjetas ---- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid var(--bdr-gray-light);
  border-top: 3px solid transparent;
  background: var(--bdr-white);
  color: var(--bdr-primary);
  text-decoration: none;
  box-shadow: var(--bdr-shadow-sm);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.tile:hover {
  transform: translateY(-3px);
  border-top-color: var(--bdr-accent);
  box-shadow: var(--bdr-shadow-md);
}
.tile:focus-visible {
  outline: none;
  border-color: var(--bdr-accent);
  box-shadow: 0 0 0 3px var(--bdr-accent-halo);
}

.tile__icono {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bdr-accent-halo);
  color: var(--bdr-accent-hover);
}
.tile__icono svg { width: 26px; height: 26px; }

.tile__titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--bdr-primary);
}
.tile__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bdr-text-muted);
}

/* ---- Medidor CPU (tarjeta Procesar) ---- */
.cpu {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cpu__cabecera {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--bdr-text-muted);
}
.cpu__barra {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bdr-input-bg);
  border: 1px solid var(--bdr-gray-light);
}
.cpu__relleno {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--bdr-accent);
  transition: width 0.6s ease;
}

/* ===================================================================
   Cabecera: acciones y botón Volver
   =================================================================== */
.cabecera__acciones {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.boton-volver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--bdr-gray-light);
  background: transparent;
  color: var(--bdr-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.boton-volver:hover { border-color: var(--bdr-accent); color: var(--bdr-accent-hover); }
.boton-volver svg { width: 16px; height: 16px; }

/* ===================================================================
   Placeholder de mockup ("en construcción")
   =================================================================== */
.placeholder {
  margin-top: 8px;
  padding: 40px 36px;
  border-radius: 16px;
  border: 1px dashed var(--bdr-gray-light);
  background: var(--bdr-white);
  box-shadow: var(--bdr-shadow-sm);
}
.placeholder__icono {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bdr-accent-halo);
  color: var(--bdr-accent-hover);
  margin-bottom: 16px;
}
.placeholder__icono svg { width: 30px; height: 30px; }
.placeholder__estado {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--bdr-accent-halo);
  color: var(--bdr-accent-hover);
  vertical-align: middle;
}
.placeholder__titulo {
  margin: 0 0 4px;
  font-family: var(--bdr-font-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--bdr-dark);
}
.placeholder__texto {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--bdr-text-muted);
}
.placeholder__lista {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.placeholder__lista li {
  font-size: 14px;
  color: var(--bdr-text);
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 880px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { padding: 40px 32px; }
  .marca { margin-top: 0; }
  .marca__claim { font-size: 26px; }
}
@media (max-width: 1200px) {
  .rejilla { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 920px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .rejilla { grid-template-columns: 1fr; }
  .cabecera { padding: 12px 18px; }
  .contenido { padding: 28px 18px 40px; }
}

/* ===================================================================
   EDITOR maestro-detalle (Configuración: API Keys / Modelos)
   =================================================================== */

/* ---- Sub-pestañas ---- */
.subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--bdr-gray-light);
}
.subtab {
  border: none;
  background: transparent;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bdr-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.subtab:hover { color: var(--bdr-accent-hover); }
.subtab.activo {
  color: var(--bdr-dark);
  border-bottom-color: var(--bdr-accent);
}

/* ---- Pantallas de edición: ocupan más ancho (90%) y altura fija ----
   .app--editor bloquea el scroll de la página: cada zona (formulario y
   lista) tiene su propia barra de desplazamiento. */
.contenido--ancho { max-width: 90%; }

.app--editor { height: 100vh; overflow: hidden; }
.app--editor .contenido {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Contenedor del editor (formulario / lista, redimensionable) ---- */
.editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
}

/* ---- Divisor arrastrable entre edición y listado ---- */
.editor__divisor {
  flex: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  background: transparent;
  touch-action: none;
}
.editor__divisor::before {
  content: "";
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: var(--bdr-gray-light);
  transition: background 0.15s ease, width 0.15s ease;
}
.editor__divisor:hover::before { background: var(--bdr-accent); width: 80px; }
.editor.oculto,
.subtabs.oculto,
.placeholder.oculto { display: none; }

/* ---- Parte superior: formulario (con scroll propio) + acciones (fijas) ---- */
.editor__top {
  display: flex;
  gap: 20px;
  flex: 1 1 50%;
  min-height: 0;
}
.editor__form {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 4px 12px 4px 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 18px;
  align-content: start;
}
/* La columna de acciones queda fuera del scroll: siempre visible */
.editor__acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 150px;
  flex-shrink: 0;
  overflow-y: auto;
  min-height: 0;
}
.editor__acciones .btn-accion { flex-shrink: 0; }

/* Anchos de campo: unidad mínima 25% (1 columna de 4) */
.campo--ancho  { grid-column: span 4; }
.campo--largo  { grid-column: span 3; }
.campo--medio  { grid-column: span 2; }

/* ---- Botones de acción ---- */
.btn-accion {
  height: 42px;
  border: none;
  border-radius: 10px;
  font-family: var(--bdr-font-button);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--bdr-accent);
  color: var(--bdr-accent-text);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.btn-accion:hover { background: var(--bdr-accent-hover); }
.btn-accion--sec {
  background: transparent;
  color: var(--bdr-text-muted);
  border: 1px solid var(--bdr-gray-light);
}
.btn-accion--sec:hover { color: var(--bdr-accent-hover); border-color: var(--bdr-accent); background: transparent; }
.btn-accion--peligro { background: var(--bdr-red); color: #fff; }
.btn-accion--peligro:hover { background: var(--bdr-red); filter: brightness(0.92); }
.btn-accion:disabled { opacity: 0.5; cursor: default; pointer-events: none; }

/* ---- Parte inferior: tabla/lista ---- */
.editor__lista {
  flex: 1 1 50%;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--bdr-gray-light);
  border-radius: 12px;
  background: var(--bdr-white);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tabla thead th {
  position: sticky;
  top: 0;
  background: var(--bdr-white);
  text-align: left;
  font-weight: 800;
  color: var(--bdr-dark);
  padding: 12px 14px;
  border-bottom: 2px solid var(--bdr-gray-light);
  white-space: nowrap;
}
.tabla tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bdr-gray-light);
  color: var(--bdr-text);
}
.tabla tbody tr { cursor: pointer; transition: background 0.1s ease; }
.tabla tbody tr:hover { background: var(--bdr-accent-halo); }
.tabla tbody tr.seleccionada { background: var(--bdr-accent-halo); }
.tabla__vacia {
  padding: 24px 14px;
  text-align: center;
  color: var(--bdr-text-muted);
}

/* Distintivo activa/inactiva en la tabla */
.pildora {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
}
.pildora--si   { background: var(--bdr-green); color: #10331a; }
.pildora--no   { background: var(--bdr-gray-light); color: var(--bdr-text); }
.pildora--rojo { background: var(--bdr-red); color: #fff; }

/* Campo clave en modo edición (solo lectura) */
.campo__control[readonly] { opacity: 0.7; cursor: not-allowed; }

textarea.campo__control { height: auto; min-height: 72px; padding: 10px 14px; resize: vertical; }
select.campo__control { cursor: pointer; }

/* ---- Checklist (multiselect de permisos en Grupos) ---- */
.checklist {
  border: 1px solid var(--bdr-gray-light);
  border-radius: 10px;
  background: var(--bdr-input-bg);
  max-height: 200px;
  overflow: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 12px;
}
.checklist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bdr-text);
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.checklist__item:hover { background: var(--bdr-accent-halo); }
.checklist__item input { accent-color: var(--bdr-accent); }
.checklist__vacia { font-size: 13px; color: var(--bdr-text-muted); padding: 8px; }

/* ---- Árbol de permisos (grupos plegables por prefijo) ---- */
.arbol {
  border: 1px solid var(--bdr-gray-light);
  border-radius: 10px;
  background: var(--bdr-input-bg);
  max-height: 260px;
  overflow: auto;
  padding: 4px;
}
.arbol__grupo { border-bottom: 1px solid var(--bdr-gray-light); }
.arbol__grupo:last-child { border-bottom: none; }
.arbol__cab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--bdr-dark);
  text-align: left;
  border-radius: 6px;
}
.arbol__cab:hover { background: var(--bdr-accent-halo); }
.arbol__chevron {
  font-size: 11px;
  color: var(--bdr-text-muted);
  transition: transform 0.15s ease;
}
.arbol__grupo.abierto .arbol__chevron { transform: rotate(90deg); }
.arbol__nombre { flex: 1; }
.arbol__contador { font-size: 11px; font-weight: 600; color: var(--bdr-text-muted); }
.arbol__items { display: none; padding: 2px 4px 8px 24px; }
.arbol__grupo.abierto .arbol__items { display: block; }
.arbol__items .checklist__item { font-weight: 400; }

/* ---- Disposición del formulario de Grupos ----
   Izquierda: Código, Nombre y Descripción apilados.
   Derecha:   Permisos ocupando toda la altura. */
.editor__form--grupos {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
  height: 100%;
}
.editor__form--grupos .gf-codigo      { grid-column: 1; grid-row: 1; }
.editor__form--grupos .gf-nombre      { grid-column: 1; grid-row: 2; }
.editor__form--grupos .gf-descripcion { grid-column: 1; grid-row: 3; align-self: start; }
.editor__form--grupos .gf-permisos    { grid-column: 2; grid-row: 1 / 4; min-height: 0; display: flex; flex-direction: column; }
.editor__form--grupos .gf-permisos .arbol { flex: 1; max-height: none; min-height: 120px; }

/* ── Módulo Productos — layout del formulario ─────────────────────────────── */
/* Izquierda (cols 1-2): Producto+Nombre en fila 1, Descripción spanning en fila 2,
   Entrenamiento+Activo en fila 3. Derecha (col 3): Grupos toda la altura. */
.editor__form--productos {
  grid-template-columns: 1fr 1fr 1.8fr;
  grid-template-rows: auto auto 1fr;
  height: 100%;
}
.editor__form--productos .pf-producto      { grid-column: 1;     grid-row: 1; }
.editor__form--productos .pf-nombre        { grid-column: 2;     grid-row: 1; }
.editor__form--productos .pf-descripcion   { grid-column: 1 / 3; grid-row: 2; }
.editor__form--productos .pf-entrenamiento { grid-column: 1;     grid-row: 3; align-self: start; }
.editor__form--productos .pf-activo        { grid-column: 2;     grid-row: 3; align-self: start; }
.editor__form--productos .pf-grupos        { grid-column: 3;     grid-row: 1 / 4; min-height: 0; display: flex; flex-direction: column; }
.editor__form--productos .pf-grupos .checklist { flex: 1; overflow-y: auto; max-height: none; min-height: 120px; border: 1px solid var(--bdr-gray-light); border-radius: 8px; padding: 8px; grid-template-columns: 1fr; align-content: start; }

/* ── Módulo Documentos — layout del formulario ───────────────────────────── */
/* Izquierda (cols 1-2): Documento+Grupo fila 1, Orden fila 2, Descripción
   spanning fila 3. Derecha (col 3): Documentos precedentes toda la altura. */
.editor__form--documentos {
  grid-template-columns: 1fr 1fr 1.4fr;
  grid-template-rows: auto auto 1fr;
  height: 100%;
}
.editor__form--documentos .df-documento   { grid-column: 1;     grid-row: 1; }
.editor__form--documentos .df-grupo       { grid-column: 2;     grid-row: 1; }
.editor__form--documentos .df-orden       { grid-column: 1;     grid-row: 2; }
.editor__form--documentos .df-descripcion { grid-column: 1 / 3; grid-row: 3; }
.editor__form--documentos .df-precedentes { grid-column: 3;     grid-row: 1 / 4; min-height: 0; display: flex; flex-direction: column; }
.editor__form--documentos .df-precedentes .checklist { flex: 1; overflow-y: auto; max-height: none; min-height: 120px; border: 1px solid var(--bdr-gray-light); border-radius: 8px; padding: 8px; grid-template-columns: 1fr; align-content: start; }

/* ── Módulo Agentes — layout del formulario ──────────────────────────────── */
/* Izquierda (cols 1-2): Agente+Nombre fila 1, Modelo+Fase fila 2,
   Activo fila 3, Descripción fila 4. Derecha (col 3): Prompt toda la altura. */
.editor__form--agentes {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: auto auto auto 1fr;
  align-content: stretch;
  height: 100%;
}
.editor__form--agentes .af-agenteid    { grid-column: 1;     grid-row: 1; }
.editor__form--agentes .af-nombre      { grid-column: 2;     grid-row: 1; }
.editor__form--agentes .af-modelo      { grid-column: 1;     grid-row: 2; }
.editor__form--agentes .af-fase        { grid-column: 2;     grid-row: 2; }
.editor__form--agentes .af-activo      { grid-column: 1;     grid-row: 3; align-self: start; }
.editor__form--agentes .af-descripcion { grid-column: 1 / 3; grid-row: 4; display: flex; flex-direction: column; }
.editor__form--agentes .af-descripcion textarea.campo__control { flex: 1; resize: vertical; }
.editor__form--agentes .af-prompt      { grid-column: 3;     grid-row: 1 / -1; min-height: 0; display: flex; flex-direction: column; }
.editor__form--agentes .af-prompt .campo__grupo { flex: 1; display: flex; flex-direction: column; }
.editor__form--agentes .af-prompt textarea.campo__control { flex: 1; resize: vertical; min-height: 120px; }

/* ── Módulo Transacciones ─────────────────────────────────────────────────── */

.filtros-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  background: var(--bdr-white);
  border: 1px solid var(--bdr-gray-light);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.filtros-barra__grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.filtros-barra__etiqueta {
  font-size: 12px;
  font-weight: 700;
  color: var(--bdr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filtros-barra__input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--bdr-gray-light);
  border-radius: 8px;
  background: var(--bdr-input-bg);
  color: var(--bdr-primary);
  font-size: 13px;
  font-family: inherit;
}
.filtros-barra__input:focus {
  outline: none;
  border-color: var(--bdr-accent);
  box-shadow: 0 0 0 3px var(--bdr-accent-halo);
}
.filtros-barra__acciones {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-bottom: 1px;
}

.tabla-estado {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 10px;
}
.tabla-estado--info  { background: var(--bdr-accent-halo); color: var(--bdr-dark); }
.tabla-estado--error { background: #fde8e8; color: var(--bdr-red); }

.tabla-contenedor {
  border: 1px solid var(--bdr-gray-light);
  border-radius: 12px;
  background: var(--bdr-white);
  overflow: auto;
}

.tabla__col--num    { width: 60px; text-align: right; }
.tabla__col--centro { text-align: center; }
.tabla__nowrap      { white-space: nowrap; }
.tabla__codigo-celda { font-family: monospace; font-size: 13px; }
.tabla--mono, .tabla--mono thead th, .tabla--mono tbody td { font-family: monospace; font-size: 13px; }
.tabla__codigo {
  font-family: monospace;
  font-size: 12px;
  background: var(--bdr-input-bg);
  border-radius: 4px;
  padding: 1px 5px;
  cursor: help;
}
.tabla__vacio { color: var(--bdr-text-muted); font-size: 13px; }
.tabla__vacio--fila { text-align: center; padding: 24px 14px; color: var(--bdr-text-muted); }

@media (max-width: 720px) {
  .editor__form--grupos {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .editor__form--grupos .gf-codigo,
  .editor__form--grupos .gf-nombre,
  .editor__form--grupos .gf-descripcion,
  .editor__form--grupos .gf-permisos { grid-column: 1; grid-row: auto; }
  .editor__form--grupos .gf-permisos .arbol { flex: none; max-height: 260px; }

  .editor__form--productos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .editor__form--productos .pf-producto,
  .editor__form--productos .pf-nombre        { grid-column: auto; grid-row: auto; }
  .editor__form--productos .pf-descripcion   { grid-column: 1 / 3; grid-row: auto; }
  .editor__form--productos .pf-entrenamiento,
  .editor__form--productos .pf-activo        { grid-column: auto; grid-row: auto; }
  .editor__form--productos .pf-grupos        { grid-column: 1 / 3; grid-row: auto; }
  .editor__form--productos .pf-grupos .checklist { flex: none; max-height: 260px; }

  .editor__form--agentes {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .editor__form--agentes .af-agenteid,
  .editor__form--agentes .af-nombre,
  .editor__form--agentes .af-modelo,
  .editor__form--agentes .af-fase    { grid-column: auto; grid-row: auto; }
  .editor__form--agentes .af-activo  { grid-column: auto; grid-row: auto; }
  .editor__form--agentes .af-descripcion { grid-column: 1 / 3; grid-row: auto; }
  .editor__form--agentes .af-descripcion textarea.campo__control { flex: none; min-height: 80px; }
  .editor__form--agentes .af-prompt  { grid-column: 1 / 3; grid-row: auto; }
  .editor__form--agentes .af-prompt .campo__grupo { flex: none; }
  .editor__form--agentes .af-prompt textarea.campo__control { flex: none; min-height: 200px; }

  .editor__form--documentos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .editor__form--documentos .df-documento,
  .editor__form--documentos .df-grupo,
  .editor__form--documentos .df-orden       { grid-column: auto; grid-row: auto; }
  .editor__form--documentos .df-descripcion { grid-column: 1 / 3; grid-row: auto; }
  .editor__form--documentos .df-precedentes { grid-column: 1 / 3; grid-row: auto; }
  .editor__form--documentos .df-precedentes .checklist { flex: none; max-height: 260px; }
}

@media (max-width: 720px) {
  .editor__top { flex-direction: column; }
  .editor__acciones { width: 100%; flex-direction: row; }
  .editor__form { grid-template-columns: 1fr; }
  .campo--ancho, .campo--largo, .campo--medio { grid-column: span 1; }
}

/* =====================================================================
   Modal genérico (mini-diálogo flotante)
   ===================================================================== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal.oculto { display: none; }
.modal__panel {
  background: var(--bdr-white);
  border-radius: 8px;
  padding: 2rem;
  width: min(420px, 90vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal__titulo { margin: 0; font-size: 1.1rem; color: var(--bdr-dark); }
.modal__desc   { margin: 0; font-size: .9rem; color: var(--bdr-text); }
.modal__acciones { display: flex; justify-content: flex-end; gap: .75rem; margin-top: .25rem; }

/* ── Monitorización de trabajos (modal) ───────────────────────────────── */
.mon-filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mon-filtros .campo__control { width: auto; min-width: 130px; height: 36px; }
.mon-cuerpo { overflow: auto; flex: 1 1 auto; min-height: 120px; }
.mon-lote { border: 1px solid var(--bdr-gray-light); border-radius: 8px; margin-bottom: .5rem; overflow: hidden; }
.mon-lote__cab {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; cursor: pointer;
  background: var(--bdr-bg);
}
.mon-lote__cab:hover { background: var(--bdr-accent-halo, var(--bdr-bg)); }
.mon-lote__tit { flex: 1 1 auto; min-width: 0; }
.mon-lote__desc { font-weight: 600; color: var(--bdr-dark); }
.mon-lote__meta { font-size: 12px; color: var(--bdr-text-muted); margin-top: 2px; }
.mon-lote__toggle { color: var(--bdr-text-muted); font-size: 12px; }
.mon-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.mon-badge {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  color: var(--bdr-white); white-space: nowrap;
}
.mon-badge--ok        { background: var(--bdr-green); }
.mon-badge--error     { background: var(--bdr-red); }
.mon-badge--encurso   { background: var(--bdr-amber); }
.mon-badge--pendiente { background: var(--bdr-text-muted); }
.mon-badge--pausa     { background: var(--bdr-cyan); }
.mon-badge--okparcial { background: var(--bdr-amber); color: #5a3800; }
.mon-badge--cancelado { background: var(--bdr-text-muted); opacity: .7; }
.mon-trabajos { padding: .25rem .5rem .5rem; }
.mon-trab {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .5rem;
  padding: .35rem .5rem; font-size: 13px; border-top: 1px solid var(--bdr-gray-light);
  align-items: center;
}
.mon-trab__est { font-weight: 700; font-size: 11px; }
.mon-trab__est--editable {
  cursor: pointer; color: var(--bdr-cyan); text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.mon-trab__est--editable:hover { color: var(--bdr-dark); }
.mon-trab { cursor: pointer; }
.mon-trab:hover { background: var(--bdr-bg); }

/* Mensaje legible para el usuario, destacado sobre el detalle técnico */
.trab-mensaje {
  flex: none; padding: .6rem .9rem; border-radius: 6px; font-size: 13px; line-height: 1.4;
  background: var(--bdr-bg); border: 1px solid var(--bdr-gray-light); color: var(--bdr-text);
  white-space: pre-wrap; word-break: break-word;
}
.trab-mensaje--error {
  background: rgba(220, 38, 38, .08);
  border-color: var(--bdr-red, #dc2626);
  color: var(--bdr-red, #b91c1c); font-weight: 600;
}

/* Detalle de un trabajo (modal): texto desplazable */
.trab-texto {
  margin: 0; flex: 1 1 auto; overflow: auto; max-height: 70vh;
  background: var(--bdr-bg); border: 1px solid var(--bdr-gray-light); border-radius: 6px;
  padding: .75rem 1rem; font-size: 12px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =====================================================================
   Módulo Productos — ficha de producto
   ===================================================================== */
.prod-ficha__breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.prod-panel__acciones {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.prod-upload {
  margin-bottom: 16px;
}

/* =====================================================================
   Módulo Contenidos — layout 3 paneles
   ===================================================================== */
.cont3 {
  display: flex;
  height: calc(100vh - 56px); /* 56px = altura aprox. de la barra superior */
  overflow: hidden;
}

/* Panel izquierdo: Navegador */
.cont3__nav {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cont3__nav-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 14px;
  overflow: hidden;
}

/* Panel central: Editor */
.cont3__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bdr-bg);
  overflow: hidden;
}

/* Panel derecho: Metadatos */
.cont3__meta {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  overflow: hidden;
}
.cont3__meta-inner {
  height: 100%;
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Título de panel */
.cont3__titulo {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bdr-text-muted);
  margin-bottom: 12px;
}

/* Filtros en navegador */
.cont3__filtros {
  flex-shrink: 0;
  margin-bottom: 12px;
}

/* Lista de contenidos */
.cont3__lista {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cont3__lista-vacia {
  font-size: 13px;
  color: var(--bdr-text-muted);
  padding: 12px 4px;
}
.cont3__lista-item {
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.1s ease;
}
.cont3__lista-item:hover  { background: var(--bdr-accent-halo); }
.cont3__lista-item.activo { background: var(--bdr-accent-halo); border-left: 3px solid var(--bdr-accent); }
.cont3__lista-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--bdr-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cabecera del editor central */
.cont3__main-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  flex-shrink: 0;
}
.cont3__main-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--bdr-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* Área de edición / previsualización */
.cont3__edit-area {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cont3__textarea {
  flex: 1;
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 20px 24px;
  font-size: 14px;
  font-family: monospace;
  line-height: 1.6;
  background: var(--bdr-bg);
  color: var(--bdr-primary);
}
.cont3__textarea[readonly] { cursor: default; opacity: 0.85; }
.cont3__preview {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bdr-primary);
  background: var(--bdr-bg);
}
.cont3__preview h1 { font-family: var(--bdr-font-heading); font-size: 22px; color: var(--bdr-dark); margin: 16px 0 8px; }
.cont3__preview h2 { font-family: var(--bdr-font-heading); font-size: 18px; color: var(--bdr-dark); margin: 14px 0 6px; }
.cont3__preview h3 { font-size: 15px; color: var(--bdr-dark); margin: 12px 0 4px; }
.cont3__preview ul { margin: 6px 0; padding-left: 20px; }
.cont3__preview li { margin-bottom: 4px; }
.cont3__preview p  { margin: 4px 0; }

/* Banners (aviso tipo DOCUMENTO y conflicto 409) */
.cont-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  font-size: 13px;
  flex-shrink: 0;
}
.cont-banner--warn  { background: #fff8e1; color: #6b4c00; border-bottom: 1px solid #ffd54f; }
.cont-banner--error { background: #fde8e8; color: var(--bdr-red); border-bottom: 1px solid var(--bdr-red); }

/* Metadatos: secciones internas */
.cont3__meta-secc {
  padding: 14px 0;
  border-top: 1px solid var(--bdr-gray-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cont3__meta-secc-titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bdr-text-muted);
  display: flex;
  align-items: center;
}
.cont3__meta-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cont3__meta-item {
  font-size: 13px;
  color: var(--bdr-text);
  background: var(--bdr-input-bg);
  border-radius: 6px;
  padding: 6px 8px;
  word-break: break-word;
}
.cont3__meta-campos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}
.meta-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===================================================================
   Panel Backup / Restore (pestaña Copia de seguridad en Configuración)
   =================================================================== */
.backup-panel {
  padding: 8px 0 24px;
}
.backup-panel__bloque {
  max-width: 660px;
  margin-bottom: 24px;
  padding: 24px;
  background: var(--bdr-white);
  border-radius: 8px;
  box-shadow: var(--bdr-shadow-sm);
}
.backup-panel__titulo {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bdr-dark);
}
.backup-panel__desc {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--bdr-text);
  line-height: 1.55;
}
.backup-panel__acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.backup-panel__estado {
  font-size: 13px;
  color: var(--bdr-text);
}
.backup-panel__resultado {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bdr-bg);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
}
.backup-panel__resultado h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bdr-dark);
}
.backup-panel__resultado ul {
  margin: 4px 0 12px 16px;
  padding: 0;
}
.backup-panel__resultado li {
  margin-bottom: 2px;
}

@media (max-width: 900px) {
  .cont3 { flex-direction: column; height: auto; overflow: auto; }
  .cont3__nav, .cont3__meta { width: 100%; border: none; border-bottom: 1px solid var(--bdr-gray-light); }
  .cont3__nav-inner, .cont3__meta-inner { height: auto; max-height: 300px; }
  .cont3__main { min-height: 400px; }
  .cont3__edit-area { min-height: 300px; }
  .cont3__textarea { min-height: 300px; }
}

/* =====================================================================
   Pantalla Estructura — gestión de prompts (3 columnas)
   ===================================================================== */

.estr {
  display: flex;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* Columna izquierda: selectores */
.estr__izq {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.estr__izq-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
}
.estr__izq-pie {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--bdr-gray-light);
}
.estr__grupo { margin-bottom: 14px; }
.estr__label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bdr-text-muted);
  margin-bottom: 6px;
}
.estr__lista {
  border: 1px solid var(--bdr-gray-light);
  border-radius: 8px;
  max-height: 132px;
  overflow-y: auto;
  background: var(--bdr-bg);
}
.estr__vacio {
  font-size: 12px;
  color: var(--bdr-text-muted);
  padding: 10px;
}
.estr__item {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--bdr-primary);
  cursor: pointer;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.estr__item:hover  { background: var(--bdr-accent-halo); }
.estr__item.activo { background: var(--bdr-accent-halo); border-left-color: var(--bdr-accent); font-weight: 600; }

/* Backlog de mejoras: grupos desplegables por número de trabajo */
.backlog__grupo { border-bottom: 1px solid var(--bdr-gray-light); }
.backlog__grupo:last-child { border-bottom: none; }
.backlog__grupo > summary { list-style-position: outside; }
.backlog__grupo > summary:hover { background: var(--bdr-accent-halo); }
.backlog__grupo .estr__item { padding-left: 22px; }

/* Ítem con casilla (multiselección de productos) */
.estr__item--check {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
}
.estr__item--check input {
  flex-shrink: 0;
  accent-color: var(--bdr-accent);
  cursor: pointer;
}
.estr__item--check span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Separación entre Productos y Documentos */
.estr__sep {
  height: 0;
  border-top: 1px solid var(--bdr-gray-light);
  margin: 4px 2px 16px;
}

/* Columna central: prompt + documentos */
.estr__centro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bdr-bg);
  padding: 14px;
  gap: 6px;
  overflow: hidden;
}

/* Divisor arrastrable entre Prompt (arriba) y Original/Resultado (abajo) */
.estr__divisor {
  flex: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  touch-action: none;
}
.estr__divisor::before {
  content: "";
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: var(--bdr-gray-light);
  transition: background 0.15s ease, width 0.15s ease;
}
.estr__divisor:hover::before { background: var(--bdr-accent); width: 80px; }
.estr__prompt {
  display: flex;
  flex-direction: column;
  flex: 1 1 45%;
  min-height: 0;
}
.estr__docs {
  display: flex;
  gap: 12px;
  flex: 1 1 55%;
  min-height: 0;
}
.estr__doc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.estr__sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--bdr-dark);
  margin: 8px 0 4px;
}
.estr__sub--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Toggle de vista (JSON / Árbol) del panel Resultado */
.estr__vista-toggle {
  display: flex;
  gap: 2px;
  background: var(--bdr-bg);
  border-radius: 6px;
  padding: 2px;
}
.estr__vista-btn {
  border: none;
  background: transparent;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bdr-text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.estr__vista-btn:hover { color: var(--bdr-dark); }
.estr__vista-btn--activo,
.estr__vista-btn--activo:hover {
  color: var(--bdr-dark);
  background: var(--bdr-white);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Vista de árbol del Resultado (mismo hueco que el textarea, mutuamente excluyentes) */
.estr__arbol {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--bdr-gray-light);
  border-radius: 8px;
  padding: 8px 6px;
  background: var(--bdr-white);
}
.estr__vacio--error { color: var(--bdr-red); }
.estr__textarea {
  flex: 1;
  width: 100%;
  resize: none;
  border: 1px solid var(--bdr-gray-light);
  border-radius: 8px;
  padding: 10px;
  font-family: var(--bdr-font-mono, monospace);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bdr-primary);
  background: var(--bdr-white);
  min-height: 0;
}
/* Contenedor del textarea con botón Copiar superpuesto */
.estr__ta-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.estr__copiar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: auto;
  font-size: 11px;
  padding: 3px 9px;
  height: auto;
  z-index: 2;
}

.estr__textarea:focus { outline: 2px solid var(--bdr-accent); outline-offset: -1px; }
.estr__textarea--ro   { background: var(--bdr-bg); cursor: default; opacity: 0.9; }

/* Columna derecha: acciones */
.estr__der {
  width: 230px;
  flex-shrink: 0;
  border-left: 1px solid var(--bdr-gray-light);
  background: var(--bdr-white);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

/* ── Layout 4 cuadrantes (interpretar.html) ──────────────────────── */
.estr__top,
.estr__bottom {
  display: flex;
  flex-direction: row;
  flex: 1 1 0;
  min-height: 0;
  gap: 14px;
  overflow: hidden;
}

.estr__panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Contenedor del diagrama SVG (panel B) */
.estr__flujo {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--bdr-gray-light);
  border-radius: 8px;
  background: var(--bdr-white);
  min-height: 0;
}

/* Contenedor de tarjetas de instrucción (paneles C y D) */
.instruc-lista {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--bdr-gray-light);
  border-radius: 8px;
  background: var(--bdr-white);
  padding: 8px;
  min-height: 0;
}

/* Tarjetas de instrucción */
.instruc-card {
  border: 1px solid var(--bdr-gray-light);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.instruc-card:last-child { margin-bottom: 0; }
.instruc-card:hover { border-color: var(--bdr-cyan); }
.instruc-card--activo { border-color: var(--bdr-accent); background: var(--bdr-bg); }
.instruc-card__cab {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 5px;
}
.instruc-card__loc {
  font-size: 12px;
  color: var(--bdr-text);
  margin-bottom: 4px;
  word-break: break-all;
}
.instruc-card__texto {
  color: var(--bdr-primary);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Nodo activo en el árbol de A */
.sec-nodo__cab { cursor: pointer; }
.sec-nodo--activo > .sec-nodo__cab {
  background: var(--bdr-accent);
  border-radius: 6px;
}
.sec-nodo--activo > .sec-nodo__cab .sec-nodo__titulo { color: #fff; }
.sec-nodo--activo > .sec-nodo__cab .sec-nodo__slug,
.sec-nodo--activo > .sec-nodo__cab .sec-tipo { color: rgba(255,255,255,.75); }
.sec-nodo--activo > .sec-nodo__cab .sec-btn { color: rgba(255,255,255,.85); }

@media (max-width: 900px) {
  .estr { flex-direction: column; height: auto; overflow: auto; }
  .estr__izq, .estr__der { width: 100%; border: none; border-bottom: 1px solid var(--bdr-gray-light); }
  .estr__centro { min-height: 480px; }
  .estr__docs { flex-direction: column; }
}

/* =====================================================================
   Árbol de estructura + fragmentos (interpretar.html — panel Resultado)
   ===================================================================== */

.sec-arbol {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--bdr-gray-light);
  border-radius: 8px;
  background: var(--bdr-white);
  padding: 8px 6px;
  min-height: 0;
}

/* Nodo de sección */
.sec-nodo {
  border: 1px solid var(--bdr-gray-light);
  border-radius: 6px;
  margin-bottom: 5px;
  background: var(--bdr-white);
  overflow: hidden;
}
.sec-nodo--n1 { margin-left: 14px; }
.sec-nodo--n2 { margin-left: 28px; }

.sec-nodo__cab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bdr-bg);
  border-bottom: 1px solid var(--bdr-gray-light);
}
.sec-nodo__titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--bdr-dark);
  flex-shrink: 0;
}
.sec-nodo__slug {
  font-size: 11px;
  color: var(--bdr-text-muted);
  font-family: var(--bdr-font-mono, monospace);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sec-nodo__cuerpo { padding: 6px 8px; }

/* Badges de tipo de sección */
.sec-tipo {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sec-tipo--fija       { background: rgba(54,198,220,.15); color: var(--bdr-cyan); }
.sec-tipo--variable   { background: var(--bdr-accent-halo); color: var(--bdr-dark); }
.sec-tipo--opcional   { background: var(--bdr-gray-light); color: var(--bdr-text-muted); }
.sec-tipo--contenedor { background: var(--bdr-gray-light); color: var(--bdr-text-muted); font-weight: 700; }

/* Texto constante (FIJA) */
.sec-constante {
  font-size: 11px;
  font-family: var(--bdr-font-mono, monospace);
  background: var(--bdr-bg);
  border-radius: 4px;
  padding: 5px 7px;
  white-space: pre-wrap;
  max-height: 72px;
  overflow: hidden;
  color: var(--bdr-text);
  margin: 0;
  line-height: 1.4;
}

/* Descripción de un nodo (prosa, no literal) */
.sec-descripcion {
  font-size: 12px;
  color: var(--bdr-text);
  margin: 0 0 4px;
  line-height: 1.4;
}
/* Condición 'opcional' de un nodo */
.sec-opcional {
  font-size: 11px;
  color: var(--bdr-text-muted);
  font-style: italic;
  margin: 0 0 4px;
}

/* Lista de fragmentos */
.sec-frags { display: flex; flex-direction: column; gap: 4px; }
.sec-frags--vacio {
  font-size: 12px;
  color: var(--bdr-text-muted);
  padding: 3px 0;
  font-style: italic;
}

/* Fila de fragmento */
.sec-frag {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--bdr-gray-light);
  border-left-width: 3px;
  background: var(--bdr-bg);
  font-size: 12px;
}
.sec-frag--candidato  { border-left-color: var(--bdr-amber); }
.sec-frag--confirmado { border-left-color: var(--bdr-green); }
.sec-frag--descartado { border-left-color: var(--bdr-text-muted); opacity: 0.6; }

.sec-frag__main { flex: 1; min-width: 0; }
.sec-frag__clave {
  font-family: var(--bdr-font-mono, monospace);
  font-size: 11px;
  color: var(--bdr-cyan);
}
.sec-frag__titulo {
  font-size: 12px;
  color: var(--bdr-primary);
  margin-left: 6px;
}
.sec-frag__chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.sec-chip {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bdr-gray-light);
  color: var(--bdr-text);
}
.sec-chip--ok        { background: var(--bdr-green);  color: #fff; }
.sec-chip--ko        { background: var(--bdr-red);    color: #fff; }
.sec-chip--candidato { background: var(--bdr-amber);  color: #fff; }

/* Cita literal de una fuente (ficha de traza / inversa) */
.traza-cita {
  font-size: 12px;
  font-style: italic;
  color: var(--bdr-text);
  background: var(--bdr-bg);
  border-left: 3px solid var(--bdr-cyan);
  padding: 4px 8px;
  margin-top: 3px;
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
}

/* Caja SVG activa en el diagrama B */
.flujo-caja--activo rect { stroke: var(--bdr-accent) !important; stroke-width: 2.5 !important; }
.sec-frag__ext {
  font-size: 10px;
  color: var(--bdr-text-muted);
  margin-top: 2px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botones de acción en fragmento y sección */
.sec-frag__acciones { display: flex; gap: 2px; align-items: flex-start; flex-shrink: 0; }
.sec-btn {
  background: none;
  border: 1px solid var(--bdr-gray-light);
  border-radius: 4px;
  font-size: 12px;
  padding: 2px 5px;
  color: var(--bdr-text-muted);
  cursor: pointer;
  line-height: 1.2;
}
.sec-btn:hover              { background: var(--bdr-accent-halo); border-color: var(--bdr-accent); color: var(--bdr-dark); }
.sec-btn--ok:hover          { background: rgba(132,205,141,.18); border-color: var(--bdr-green); color: var(--bdr-green); }
.sec-btn--ko:hover,
.sec-btn--del:hover         { background: rgba(200,84,80,.10); border-color: var(--bdr-red); color: var(--bdr-red); }
.sec-btn--edit              { font-size: 13px; margin-left: 2px; flex-shrink: 0; }

/* =====================================================================
   Sistema unificado de diálogos — bdrDialog
   ===================================================================== */

.bdr-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .50);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: bdr-dlg-fade-in .15s ease;
}
.bdr-dialog-overlay--salida {
  animation: bdr-dlg-fade-out .18s ease forwards;
}

@keyframes bdr-dlg-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bdr-dlg-fade-out { from { opacity: 1; } to { opacity: 0; } }

.bdr-dialog {
  background: var(--bdr-white);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  width: min(440px, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bdr-dlg-scale-in .15s ease;
}
.bdr-dialog--salida {
  animation: bdr-dlg-scale-out .18s ease forwards;
}
/* Variante ancha (p.ej. para mostrar el texto completo de una nota). */
.bdr-dialog--ancho { width: min(760px, 94vw); }

@keyframes bdr-dlg-scale-in  { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bdr-dlg-scale-out { from { transform: scale(1);   opacity: 1; } to { transform: scale(.94); opacity: 0; } }

/* ---- Cabecera ---- */
.bdr-dialog__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--bdr-gray-light);
}
.bdr-dialog__titulo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bdr-dark);
}
.bdr-dialog__cerrar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--bdr-text-muted, #888);
  padding: 2px 6px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.bdr-dialog__cerrar:hover { color: var(--bdr-red); background: rgba(200, 84, 80, .10); }

/* ---- Cuerpo con patrón de fondo ---- */
.bdr-dialog__body {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  padding: 22px 24px 20px;
  background-color: var(--bdr-bg, #f5f5f5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext x='8' y='22' font-size='14' fill='rgba(0%2C0%2C0%2C0.06)' font-family='Arial'%3E%C3%97%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}
.bdr-dialog__linea {
  margin: 0 0 6px;
  font-size: .92rem;
  color: var(--bdr-text);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.bdr-dialog__linea:last-child { margin-bottom: 0; }
.bdr-dialog__linea--vacia { margin: 4px 0; }

/* ---- Campo desplegable opcional ---- */
.bdr-dialog__campo {
  display: flex; flex-direction: column; gap: .25rem;
  margin-top: .75rem;
}
.bdr-dialog__campo-label {
  font-size: .8rem; font-weight: 700; color: var(--bdr-dark);
}
.bdr-dialog__select { width: 100%; }

/* ---- Pie ---- */
.bdr-dialog__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--bdr-gray-light);
}

/* ---- Grupo confirmar con código ---- */
.bdr-dialog__grupo-confirmar {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.bdr-dialog__grupo-confirmar .bdr-dialog__btn-confirmar {
  border-radius: 8px 0 0 8px;
  white-space: nowrap;
}
.bdr-dialog__grupo-confirmar .bdr-dialog__btn-confirmar:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.bdr-dialog__codigo {
  width: 72px;
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
  text-align: center;
  letter-spacing: .1em;
  font-size: .85rem;
}
.bdr-dialog__codigo--ok {
  border-color: var(--bdr-green) !important;
  background: rgba(132, 205, 141, .12) !important;
}
.bdr-dialog__codigo:focus { outline: none; box-shadow: 0 0 0 2px rgba(54, 198, 220, .4); }

/* =====================================================================
   Módulo Ficheros — gestión de ficheros por producto/documento
   ===================================================================== */

/* ---- Panel wrappers (usados por ambas pestañas principales) ---- */
.tab-panel--editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tab-panel--ficheros {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}

/* ---- Aviso informativo bajo los selectores ---- */
.fich-aviso {
  font-size: 13px;
  color: var(--bdr-amber);
  margin: -12px 0 16px;
  padding: 8px 12px;
  background: rgba(251, 175, 49, .08);
  border-left: 3px solid var(--bdr-amber);
  border-radius: 0 6px 6px 0;
}

/* ---- Fila de selectores ---- */
.fich-sel {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.fich-sel__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}
.fich-sel__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--bdr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Rejilla de 3 paneles ---- */
.fich-paneles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ---- Panel individual ---- */
.fich-panel {
  background: var(--bdr-white);
  border-radius: 10px;
  border: 1px solid var(--bdr-gray-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fich-panel--deshabilitado {
  opacity: .45;
  pointer-events: none;
}
.fich-panel__titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bdr-text-muted);
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--bdr-gray-light);
  background: var(--bdr-bg);
}
.fich-panel__arbol {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  min-height: 240px;
  max-height: 440px;
  font-size: 13px;
}
.fich-panel__btns {
  padding: 12px 14px;
  border-top: 1px solid var(--bdr-gray-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Árbol de ficheros ---- */
.fich-arbol__vacio {
  font-size: 13px;
  color: var(--bdr-text-muted);
  margin: 6px 4px;
}
.fich-arbol__carpeta {
  padding: 4px 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--bdr-dark);
  user-select: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s ease;
}
.fich-arbol__carpeta:hover { background: var(--bdr-accent-halo); }
.fich-arbol__carpeta--sel  { background: var(--bdr-accent-halo); color: var(--bdr-accent-hover); }
.fich-arbol__fichero {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 2px;
  font-size: 13px;
  color: var(--bdr-primary);
}
.fich-arbol__fichero label {
  cursor: pointer;
  user-select: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fich-arbol__chk {
  cursor: pointer;
  accent-color: var(--bdr-accent);
  flex-shrink: 0;
}

/* ---- Estados de fichero ---- */
.fich-arbol__fichero--completo    label { color: var(--bdr-green); }
.fich-arbol__fichero--solo-fichero label { color: var(--bdr-amber); }
.fich-arbol__fichero--huerfano    label { color: var(--bdr-red); opacity: 0.85; }

/* ---- Leyenda de estados ---- */
.fich-leyenda {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--bdr-text-muted);
  margin-bottom: 12px;
}
.fich-leyenda__item { white-space: nowrap; }

@media (max-width: 960px) {
  .fich-paneles { grid-template-columns: 1fr; }
}

/* ===================================================================
   Panel de resumen (KPIs)  —  usado en Costes IA
   =================================================================== */
.resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.resumen__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--bdr-white);
  border: 1px solid var(--bdr-gray-light);
  border-radius: 10px;
}
.resumen__card--acento {
  border-color: var(--bdr-accent);
  box-shadow: 0 0 0 1px var(--bdr-accent) inset;
}
.resumen__etiqueta {
  font-size: 11px;
  font-weight: 700;
  color: var(--bdr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.resumen__valor {
  font-size: 20px;
  font-weight: 700;
  color: var(--bdr-dark);
  font-variant-numeric: tabular-nums;
}
.resumen__card--acento .resumen__valor { color: var(--bdr-accent); }

/* ============================================================= */
/* Pantalla Estructura v2 (paradigma Dlongwood)                  */
/* ============================================================= */
.estr__editor { flex:1; display:flex; flex-direction:column; min-height:0; }
.estr__editor .editor__top { display:flex; gap:12px; min-height:0; }

.est-arbol-panel { flex:0 0 44%; display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--bdr-gray-light); border-radius:8px; background:var(--bdr-white); overflow:hidden; }
.est-area-panel { flex:1; display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--bdr-gray-light); border-radius:8px; background:var(--bdr-white); overflow:auto; padding:12px; }
.est-panel-tit { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--bdr-text-muted);
  padding:8px 10px; border-bottom:1px solid var(--bdr-gray-light); font-weight:600; }
.est-arbol { overflow:auto; flex:1; padding:5px; }

.est-node { display:flex; align-items:center; gap:6px; padding:3px 6px; border-radius:5px; cursor:pointer;
  font-size:13px; white-space:nowrap; color:var(--bdr-primary); }
.est-node:hover { background:var(--bdr-accent-halo); }
.est-node.activo { background:var(--bdr-accent-halo); box-shadow:inset 3px 0 0 var(--bdr-accent); }
.est-node__clave { color:var(--bdr-text-muted); font-family:var(--bdr-font-mono); font-size:11px; }
.est-node__tit { overflow:hidden; text-overflow:ellipsis; }

.est-badge { font-size:10px; padding:1px 6px; border-radius:9px; background:var(--bdr-bg);
  color:var(--bdr-text); border:1px solid var(--bdr-gray-light); flex:0 0 auto; }
.est-badge--MIXTA { color:var(--bdr-purple); border-color:var(--bdr-purple); }
.est-badge--PROPIA { color:var(--bdr-red); border-color:var(--bdr-red); }
.est-badge--opc { color:var(--bdr-amber); border-color:var(--bdr-amber); }
.est-badge--ref { color:var(--bdr-cyan); border-color:var(--bdr-cyan); }

.est-field { margin-bottom:12px; }
.est-field__label { font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--bdr-text-muted); margin-bottom:4px; display:block; font-weight:600; }
.est-field__meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.est-preview { border:1px dashed var(--bdr-gray-light); border-radius:6px; padding:8px; min-height:38px;
  white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.55; background:var(--bdr-bg); }
.est-token { color:var(--bdr-accent-text); background:var(--bdr-cyan); padding:0 5px; border-radius:4px;
  cursor:pointer; font-family:var(--bdr-font-mono); font-size:12px; }
.est-token:hover { filter:brightness(.92); }

.est-tabs { display:flex; gap:4px; padding:4px 4px 0; border-bottom:1px solid var(--bdr-gray-light); flex:0 0 auto; }
.est-tab { padding:6px 14px; cursor:pointer; font-size:13px; border:1px solid transparent; border-bottom:none;
  border-radius:6px 6px 0 0; color:var(--bdr-text); }
.est-tab:hover { background:var(--bdr-accent-halo); }
.est-tab.activo { background:var(--bdr-white); border-color:var(--bdr-gray-light); color:var(--bdr-dark); font-weight:600; }
.est-tab-body { overflow:auto; flex:1; padding:8px 10px; }

.est-nodebtns { display:flex; flex-wrap:wrap; gap:6px; }
.est-nodebtns .icono-btn { flex:0 0 auto; min-width:34px; font-weight:700; }

.est-var { border-bottom:1px solid var(--bdr-gray-light); padding:7px 0; font-size:13px; }
.est-var__cab { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.est-var__clave { font-family:var(--bdr-font-mono); color:var(--bdr-cyan); }
.est-var__vals { margin:4px 0 0; padding-left:14px; color:var(--bdr-text); font-size:12px; }
.est-anom { padding:5px 0; font-size:13px; border-bottom:1px solid var(--bdr-gray-light); }
.est-anom__cat { font-family:var(--bdr-font-mono); font-size:11px; margin-right:6px; }
.est-outline { font-size:13px; line-height:1.6; }
.est-outline__clave { color:var(--bdr-text-muted); font-family:var(--bdr-font-mono); font-size:11px; }

.est-node__pres { font-family:var(--bdr-font-mono); font-size:11px; color:var(--bdr-text-muted); letter-spacing:1px; flex:0 0 auto; }

/* Contenido con resaltado de {{tokens}} (M13) — overlay detrás del textarea.
   El textarea (encima, fondo transparente) y el backdrop (debajo) DEBEN compartir
   métricas idénticas para que el resaltado quede alineado con el texto. */
.est-cont-wrap { position:relative; }
.est-cont-wrap .est-cont-ta,
.est-cont-wrap .est-cont-bd {
  font-family:var(--bdr-font-body); font-size:13px; line-height:1.55;
  padding:8px 10px; border:1px solid transparent; border-radius:6px;
  box-sizing:border-box; width:100%; margin:0;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word;
  letter-spacing:normal; text-align:left; tab-size:4;
}
.est-cont-wrap .est-cont-ta {
  position:relative; z-index:2; display:block; resize:vertical; min-height:280px;
  background:transparent; color:var(--bdr-primary); border-color:var(--bdr-gray-light);
}
.est-cont-wrap .est-cont-ta:focus { outline:none; border-color:var(--bdr-cyan); }
.est-cont-wrap .est-cont-bd {
  position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
  color:transparent; background:var(--bdr-white);
}
.est-tok-hl { background:var(--bdr-accent-halo); border-radius:3px;
  box-shadow:0 0 0 1px var(--bdr-cyan) inset; }

/* Página MCP (descarga + guía) */
.mcp__panel { display:flex; flex-direction:column; gap:22px; max-width:760px; }
.mcp__bloque { border:1px solid var(--bdr-gray-light); border-radius:10px; padding:18px 20px;
  background:var(--bdr-white); }
.mcp__subtitulo { font-family:var(--bdr-font-heading); font-size:18px; color:var(--bdr-dark);
  margin:0 0 8px; }
.mcp__pasos { margin:6px 0 0; padding-left:20px; line-height:1.6; }
.mcp__pasos li { margin-bottom:10px; }
.mcp__codigo { font-family:var(--bdr-font-mono); font-size:12.5px; line-height:1.5;
  background:var(--bdr-bg); border:1px solid var(--bdr-gray-light); border-radius:6px;
  padding:10px 12px; margin:6px 0 0; overflow-x:auto; white-space:pre; }
.mcp__estado { margin-top:10px; font-size:13px; color:var(--bdr-text); }
.mcp__estado--error { color:var(--bdr-red); }