:root {
  --tinta: #16233a;
  --tinta-suave: #4a5872;
  --lienzo: #f6f7f9;
  --superficie: #ffffff;
  --borde: #e2e5ea;
  --acento: #1f5f5b;
  --acento-suave: #e8f0ef;
  --error: #a4322a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, "Inter", sans-serif;
  background: var(--lienzo);
  color: var(--tinta);
}

/* ---------- Login ---------- */

.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta-login {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 40px 36px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 1px 3px rgba(22, 35, 58, 0.06);
}

.tarjeta-login h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.tarjeta-login p.subtitulo {
  color: var(--tinta-suave);
  font-size: 0.875rem;
  margin: 0 0 28px;
}

.campo { margin-bottom: 10px; }

.campo-etiqueta-lado {
  display: flex;
  align-items: center;
  gap: 8px;
}
.campo-etiqueta-lado > label {
  flex-shrink: 0;
  margin-bottom: 0;
  min-width: fit-content;
}
.campo-etiqueta-lado > input,
.campo-etiqueta-lado > select {
  flex: 1;
}

.fila-formula-revisar { background: #fff3cd; }

.menu-superior-consulta {
  border-bottom: 1px solid #ccc;
  margin-bottom: 14px;
  padding-bottom: 4px;
}
.menu-superior-consulta-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-superior-consulta-lista .item-menu {
  position: relative;
}
.menu-superior-consulta-lista .item-menu > .fila {
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  background: #f2f2f2;
  color: #333;
  white-space: nowrap;
}
.menu-superior-consulta-lista .item-menu > .fila:hover { background: #e0e0e0; }
.menu-superior-consulta-lista .item-menu .hijos {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 180px;
  z-index: 20;
  display: none;
}
.menu-superior-consulta-lista .item-menu.abierto .hijos { display: block; }
.menu-superior-consulta-lista .item-menu .hijos .item-menu > .fila { padding-left: 12px; }

.grupo-visual-campos {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 12px 2px;
  margin-bottom: 10px;
}
.grupo-visual-campos legend {
  padding: 0 8px;
  font-weight: 600;
  color: #444;
}

.campo label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 3px;
}

.campo input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--lienzo);
}

.campo input:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  background: var(--superficie);
}

/* Foco visible en botones -- sin esto, el navegador por default lo
   marca de forma muy sutil (o nada, en algunos navegadores), dificil de
   notar al navegar con Tab. Mismo patron ya usado en el resto del
   sistema (inputs, renglones de browse, etc). */
button:focus, .boton-primario:focus, .boton-secundario:focus, .boton-chico:focus {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.boton-primario {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 6px;
  background: var(--acento);
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.boton-primario:hover { background: #184a47; }
.boton-primario:disabled { opacity: 0.6; cursor: default; }

.mensaje-error {
  background: #fbeceb;
  color: var(--error);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: none;
}

/* ---------- Shell con menú hamburguesa ---------- */

.app-shell { display: flex; min-height: 100vh; }

.barra-lateral {
  width: 260px;
  background: var(--tinta);
  color: #dfe4ee;
  flex-shrink: 0;
  transition: margin-left 0.2s ease;
  overflow-y: auto;
}

.barra-lateral.oculta { margin-left: -260px; }

.encabezado-barra {
  padding: 18px 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.lista-menu { list-style: none; margin: 0; padding: 6px 0; }

.item-menu > .fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 20px;
  cursor: pointer;
  font-size: 0.9rem;
}

.item-menu > .fila:hover { background: rgba(255,255,255,0.06); }
.item-menu > .fila:focus {
  outline: 2px solid var(--acento, #4a9eff);
  outline-offset: -2px;
  background: rgba(255,255,255,0.1);
}

.item-menu .hijos {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0,0,0,0.15);
  display: none;
}

.item-menu.abierto > .hijos { display: block; }
.item-menu.abierto > .fila .flecha { transform: rotate(90deg); }

.item-menu .hijos .fila { padding-left: 36px; }

.separador-menu {
  height: 1px;
  margin: 6px 16px;
  background: rgba(255,255,255,0.12);
}

.fila-solo-icono {
  justify-content: center;
  padding: 9px 12px;
}

.icono-menu {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.flecha { transition: transform 0.15s ease; font-size: 0.7rem; }

.contenido-principal { flex: 1; display: flex; flex-direction: column; }

.barra-superior {
  height: 56px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
}

.boton-hamburguesa {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--tinta);
  padding: 6px;
}

.boton-logout {
  margin-left: auto; /* empuja el boton al extremo derecho de la barra */
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  padding: 6px 12px;
  border-radius: 6px;
}

.boton-logout:hover {
  background: var(--acento-suave);
  color: var(--peligro, #b3261e);
}

.area-trabajo { padding: 24px; flex: 1; }

.tabla-catalogo {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
  background: var(--superficie);
}

.tabla-catalogo th, .tabla-catalogo td {
  border: 1px solid var(--borde);
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

/* La columna de descripcion (en cualquier catalogo) no debe estirar toda
   la fila -- se limita su ancho y el texto se acomoda hacia abajo si es
   mucho, en vez de ensanchar la tabla completa. */
.tabla-catalogo td[data-campo-columna="descripcion"] {
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
}

/* La columna de partida es solo un numero de linea chico -- no necesita
   casi espacio, se fija angosta para no desperdiciar ancho de la tabla. */
.tabla-catalogo td[data-campo-columna="partida"] {
  width: 36px;
  max-width: 36px;
  text-align: center;
}

.tabla-catalogo th {
  background: var(--acento-suave);
  position: sticky;
  top: 0;
}

.tabla-catalogo tbody tr:hover {
  background: var(--lienzo);
}

.encabezado-catalogo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.boton-chico { width: auto; padding: 7px 14px; font-size: 0.85rem; }

.celda-acciones-subbrowse { white-space: nowrap; }
.boton-icono {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--lienzo);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  margin-right: 4px;
}
.boton-icono:hover { background: var(--fondo-hover, #f0f0f0); }
.boton-subbrowse-borrar:hover { border-color: #d33; color: #d33; }

.boton-accion-regla {
  width: auto;
  padding: 7px 14px;
  font-size: 0.85rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--superficie);
  cursor: pointer;
  margin-right: 8px;
}

.boton-accion-archivo {
  width: auto;
  padding: 7px 14px;
  font-size: 0.85rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--superficie);
  cursor: pointer;
  margin-right: 8px;
}

.boton-accion-archivo:hover { background: var(--acento-suave); }

.boton-accion-regla:hover { background: var(--acento-suave); }

.boton-accion-regla-icono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.boton-secundario {
  padding: 10px 16px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--superficie);
  cursor: pointer;
}

.encabezado-formulario-catalogo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--superficie);
  padding: 4px 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--borde);
}

.encabezado-formulario-catalogo h2 { margin: 0; }

.acciones-formulario {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.encabezado-formulario-catalogo .acciones-formulario { margin-top: 0; flex-shrink: 0; }

.acciones-formulario .boton-primario { width: auto; padding: 11px 24px; }

.resultados-combo {
  position: relative;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: 6px;
  margin-top: 4px;
  background: var(--superficie);
}

.resultados-combo:empty { border: none; margin-top: 0; }

.opcion-combo {
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid var(--borde);
}

.opcion-combo:hover { background: var(--acento-suave); }
.opcion-combo:last-child { border-bottom: none; }
.opcion-combo-resaltada { background: var(--acento-suave); }

.caja-modal-formato {
  width: 90vw;
  max-width: 900px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.barra-modal-formato {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.iframe-formato {
  flex: 1;
  width: 100%;
  border: none;
  background: #999;
}

.opcion-combo-bloqueada {
  color: var(--peligro, #b3261e);
  font-style: italic;
  cursor: not-allowed;
}
.opcion-combo-bloqueada:hover { background: none; }

.opcion-combo-nueva {
  font-weight: 600;
  color: var(--acento, #2f6feb);
}

.campo input:disabled {
  background: var(--acento-suave);
  color: var(--tinta-suave);
  cursor: not-allowed;
}

.fila-clicable { cursor: pointer; }
.fila-clicable-sub { cursor: pointer; }

.campo-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.campo-checkbox input[type="checkbox"] {
  width: auto;
  cursor: pointer;
}

.fondo-modal {
  position: fixed;
  inset: 0;
  background: rgba(22, 35, 58, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.fondo-modal-interno {
  z-index: 1100;
  background: rgba(22, 35, 58, 0.55);
  padding: 0; /* sin margen -- la caja de captura llega hasta el borde */
}

.fondo-modal-interno .caja-modal {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  padding: 8px 12px; /* minimo indispensable -- se busca llegar casi al borde de la ventana del navegador */
  box-sizing: content-box; /* el reset global (border-box) dejaba espacio de mas en este elemento especifico -- confirmado visualmente en devtools */
}

.caja-modal {
  background: var(--superficie);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(22, 35, 58, 0.25);
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  padding: 32px;
}

.fondo-modal .caja-modal {
  max-width: 95vw;
  width: 95vw;
  height: 92vh;
  max-height: 92vh;
}

.boton-cerrar-modal {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--tinta-suave);
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 5;
}

.boton-cerrar-modal:hover {
  background: var(--acento-suave);
  color: var(--tinta);
}

.contenido-modal { }

.pestanas-folder {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--borde);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pestana-folder {
  padding: 9px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.pestana-folder:hover { color: var(--tinta); }

.pestana-folder.activa {
  color: var(--acento);
  border-bottom-color: var(--acento);
  font-weight: 600;
}

.panel-folder { display: none; }
.panel-folder.activo { display: block; }

.campos-comunes {
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--borde);
}

.columnas-campos {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.columna-campos {
  flex: 1;
  min-width: 0;
}

.fila-compacta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.fila-compacta .campo { margin-bottom: 0; }
.fila-compacta .campo-checkbox { margin-bottom: 0; }

.campo-memo {
  width: 100%;
  flex-basis: 100%;
}

/* Excepcion: si el memo vive DENTRO de un grupo de fila manual (el
   usuario lo agrupo a proposito con otro campo, ej. Descripcion junto
   al Carrusel de imagenes), se respeta esa intencion explicita en vez
   del ancho completo por default -- "fila" siempre gana sobre la
   heuristica automatica, tambien aqui. */
.fila-compacta .campo-memo {
  width: auto;
  flex: 1 1 45%;
}

.campo-memo textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.82rem;
  resize: vertical;
  background: var(--lienzo);
  color: var(--tinta);
  box-sizing: border-box;
}

/* tamano configurable via "formato" en la regla (chico/mediano/grande/
   extra_grande) -- el CSS base de arriba ya trae un min-height default
   (equivalente a "mediano"), estos modificadores lo ajustan segun el
   contenido esperado (ej. codigo Python largo necesita mucho mas espacio
   que una descripcion corta). */
.campo-memo-chico textarea { min-height: 80px; }
.campo-memo-grande textarea { min-height: 320px; }
.campo-memo-extra_grande textarea { min-height: 560px; }

.campo-memo textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  background: var(--superficie);
}

.campo-memo textarea:disabled {
  background: var(--acento-suave);
  color: var(--tinta-suave);
}

.mayusculas-auto { text-transform: uppercase; }

.campo-camara {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.imagen-previa {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--lienzo);
}

.carrusel-imagenes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.carrusel-imagen-actual {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--lienzo);
}
.carrusel-flecha {
  width: 32px;
  height: 32px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--lienzo);
  cursor: pointer;
  font-size: 1rem;
}
.carrusel-flecha:hover { background: var(--fondo-hover, #f0f0f0); }
.carrusel-contador { font-size: 0.8rem; color: var(--tinta-suave); margin-left: 4px; }

.boton-camara {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
}

.boton-camara.deshabilitado {
  opacity: 0.5;
  cursor: not-allowed;
}

.input-camara-oculto {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

.botones-camara {
  display: flex;
  gap: 8px;
}

.fondo-camara-viva {
  z-index: 1200; /* encima de todo, incluyendo el modal anidado del formulario */
}

.caja-camara-viva {
  background: var(--superficie);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 92vw;
}

.caja-camara-viva video {
  width: 100%;
  max-width: 480px;
  border-radius: 8px;
  background: #000;
}

.botones-camara-viva {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.caja-modal-ancha { max-width: 960px; }

.catalogo-shell {
  display: flex;
  gap: 0;
  min-height: 640px;
  margin: -32px;
}

.catalogo-nav {
  width: 150px;
  flex-shrink: 0;
  background: var(--lienzo);
  border-right: 1px solid var(--borde);
  padding: 16px 0;
  border-radius: 10px 0 0 10px;
}

.catalogo-nav-titulo {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  padding: 0 16px 12px;
}

.nav-accion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--tinta);
}

.nav-accion:hover:not(:disabled) { background: var(--acento-suave); }
.nav-accion:disabled { color: var(--borde); cursor: not-allowed; }

.catalogo-contenido {
  flex: 1;
  padding: 24px 28px;
  min-width: 0;
  position: relative;
}

.tabla-catalogo-scroll {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: 8px;
}

.col-ordenable {
  cursor: pointer;
  user-select: none;
}

.col-ordenable:hover { background: var(--borde); }

.fila-seleccionada {
  background: var(--acento-suave) !important;
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

.nav-accion {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.icono-circulo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icono-circulo svg { width: 17px; height: 17px; }

.icono-registrar { background: #dbeee9; color: #1f5f5b; }
.icono-consultar { background: #dde8f4; color: #2c5d8f; }
.icono-modificar { background: #f5e6d3; color: #a3690f; }
.icono-borrar    { background: #f7dcd9; color: #a4322a; }
.icono-limpiar   { background: #e7e4f0; color: #5b4b96; }
.icono-buscar    { background: #dde8f4; color: #2c5d8f; }
.icono-excel     { background: #dcf0e2; color: #1f7a3d; }

.catalogo-nav-separador {
  height: 1px;
  background: var(--borde);
  margin: 10px 16px;
}

.nav-accion:disabled .icono-circulo { opacity: 0.35; }
.nav-accion:hover:not(:disabled) .icono-circulo { transform: scale(1.06); }
.icono-circulo { transition: transform 0.1s ease; }

.caja-modal-ancha {
  max-width: 1180px;
  width: 92vw;
}

.tabla-catalogo-scroll {
  max-height: 60vh;
}

.envoltura-browse:focus,
#envolturaBrowse:focus {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.barra-busqueda-incremental { margin-bottom: 10px; }

.barra-busqueda-incremental input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--lienzo);
  color: var(--tinta);
  font-size: 0.85rem;
}

.barra-busqueda-incremental input.busqueda-sin-coincidencia {
  border-color: var(--error);
  color: var(--error);
}

.aviso-sin-coincidencia {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--error);
  min-height: 1em;
}

.barra-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}

.controles-paginacion {
  display: flex;
  align-items: center;
  gap: 10px;
}

.controles-paginacion button {
  padding: 5px 12px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--superficie);
  cursor: pointer;
  font-size: 0.8rem;
}

.controles-paginacion button:hover:not(:disabled) { background: var(--acento-suave); }
.controles-paginacion button:disabled { opacity: 0.4; cursor: not-allowed; }

.ayuda-teclado {
  font-size: 0.78rem;
  color: var(--tinta-suave);
  margin: 0 0 8px;
}

.indicador-filtro {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--acento-suave);
  border: 1px solid var(--acento);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: var(--tinta);
}

.indicador-filtro button {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--acento);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--acento);
  cursor: pointer;
  font-size: 0.78rem;
}

.indicador-filtro button:hover { background: var(--acento); color: white; }

.popup-busqueda {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(22, 35, 58, 0.15);
  padding: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
}

.popup-busqueda label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

.popup-busqueda select,
.popup-busqueda input {
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.85rem;
}

.popup-busqueda-botones {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.browse-vacio {
  text-align: center;
  padding: 40px 20px;
  color: var(--tinta-suave);
}

.campo-browser-embebido {
  margin-bottom: 16px;
}

.campo-color input[type="color"] {
  width: 50px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  cursor: pointer;
}

.browser-embebido {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 12px;
  margin-top: 6px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--lienzo);
}

.browser-embebido .tabla-catalogo { font-size: 0.85rem; }
.browser-embebido h3 { display: none; } /* el titulo ya lo da la etiqueta del campo, no hace falta repetirlo */

/* Al final del archivo a proposito -- con la misma especificidad que
   .fondo-modal, gana la regla que aparece MAS ABAJO en el archivo. Puesta
   aqui, siempre queda por encima de cualquier otro nivel de modal (formulario
   anidado 1100, camara en vivo 1200), sin depender del orden interno de las
   demas reglas. */
.fondo-modal-anidado {
  z-index: 1300;
}

.grupo-radio {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.opcion-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.opcion-radio input[type="radio"] { cursor: pointer; }

.campo-say { margin-bottom: 4px; }

.campo-say .valor-say {
  display: block;
  padding: 2px 8px;
  font-weight: 600;
  color: var(--acento, #2f6feb);
  min-height: 1.1em;
}

.lista-arrastrable {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 6px;
  min-height: 160px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--fondo, #f7f8fa);
}

.lista-arrastrable li {
  padding: 6px 10px;
  margin-bottom: 4px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 4px;
  cursor: grab;
  font-size: 0.85rem;
}

.lista-arrastrable li:active { cursor: grabbing; opacity: 0.6; }

.fila-columna-vista {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default !important; /* el arrastre real es solo desde el asa */
}
.fila-columna-vista .asa-arrastre {
  cursor: grab;
  color: var(--tinta-suave, #888);
  flex-shrink: 0;
}
.fila-columna-vista .nombre-campo-vista {
  font-size: 0.75rem;
  color: var(--tinta-suave, #888);
  flex-shrink: 0;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fila-columna-vista .etiqueta-columna-vista {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  padding: 3px 6px;
}
.fila-columna-vista .formato-columna-vista {
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 3px;
}

/* Disenador visual de formularios */
.disenador-capa-completa {
  position: fixed;
  inset: 0;
  background: var(--lienzo);
  z-index: 500;
  display: flex;
  flex-direction: column;
}

.disenador-barra-superior {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}

.disenador-barra-superior strong {
  flex: 1;
}

.disenador-ambiente {
  font-size: 0.8rem;
  color: var(--tinta-suave);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disenador-lienzo-completo {
  flex: 1;
  overflow: auto;
  padding: 24px;
  display: flex;
  justify-content: center;
}

.disenador-marco-caja {
  width: 100%;
  max-width: 960px; /* mismo ancho que caja-modal-ancha, la caja real del sistema */
  background: var(--superficie);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 24px;
  height: fit-content;
}

.disenador-lienzo {
  display: flex;
  gap: 24px;
}

.disenador-ancho-completo {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--borde);
}

.disenador-columna {
  flex: 1;
  border: 2px dashed var(--borde);
  border-radius: 6px;
  padding: 12px;
  min-height: 400px;
  background: var(--superficie);
}

.disenador-ficha {
  border: 1px solid var(--acento-suave);
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 6px;
  cursor: grab;
  background: var(--superficie);
  position: relative;
}

.disenador-ficha-oculta {
  opacity: 0.5;
  border-style: dashed;
}

.disenador-etiqueta-oculto {
  position: absolute;
  top: -8px;
  right: 4px;
  background: var(--error);
  color: white;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 1;
}

.disenador-chip-miembro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--acento-suave);
  border-radius: 12px;
  padding: 3px 4px 3px 10px;
  margin: 3px;
  font-size: 0.8rem;
}

.disenador-chip-quitar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--tinta-suave);
  padding: 0 4px;
}

.disenador-fila-compacta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.disenador-fila-compacta .disenador-ficha {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.disenador-ficha-chica {
  max-width: 160px;
}

.disenador-ficha.arrastrando,
.disenador-item-paleta.arrastrando {
  opacity: 0.4;
}

.disenador-marcador-browser {
  padding: 8px;
  background: var(--acento-suave);
  border-radius: 4px;
  font-size: 0.8rem;
  text-align: center;
}

/* Paleta flotante -- de verdad flotante (position:fixed), se arrastra
   tomando su propia barra de titulo, independiente del lienzo de abajo */
.disenador-paleta-flotante {
  position: fixed;
  width: 240px;
  max-height: 70vh;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.disenador-paleta-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--acento);
  color: white;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}

.disenador-paleta-cerrar {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 4px;
}

.disenador-paleta-contenido {
  padding: 10px;
  overflow-y: auto;
}

.disenador-item-paleta {
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--lienzo);
  border: 1px solid var(--borde);
  border-radius: 4px;
  cursor: grab;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
}

.disenador-item-paleta span {
  color: var(--tinta-suave);
  font-size: 0.7rem;
}


.disenador-grupo-visual {
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

.disenador-grupo-visual legend {
  font-weight: 600;
  padding: 0 6px;
  color: var(--acento);
}

.disenador-grupo-titulo {
  cursor: pointer;
}

.disenador-grupo-titulo:hover {
  text-decoration: underline;
}


#botonNuevaPestana {
  color: var(--acento);
  border-style: dashed;
}

/* spinner circular de carga -- usado en pantallas de "procesando"
   como el timbrado de traslados (ver timbrarTraslado en menu.js) */
.spinner-carga {
  width: 40px;
  height: 40px;
  border: 4px solid var(--borde);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar-spinner 0.8s linear infinite;
}

@keyframes girar-spinner {
  to { transform: rotate(360deg); }
}