/* SAP GUI Web nativo: aspecto del tema Blue Crystal de SAP GUI for Java */
:root {
  --marco: #5b9bd5;            /* barra de la ventana */
  --marco-borde: #0a8adb;
  --menu: #f2f2f2;
  --menu-texto: #555;
  --barra: #f2f2f2;
  --titulo-fondo: #f7f7f7;
  --titulo-texto: #555;
  --area-arriba: #f2f7fc;
  --area-abajo: #e7f0f9;
  --borde: #d0d0d0;
  --texto: #000;
  --azul: #0a8adb;
  --campo-borde: #bfbfbf;
  --solo-lectura: #ececec;
  --fuente: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono: "Courier New", Courier, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #fff; color: var(--texto); font: 12px var(--fuente); overflow: hidden; }
body.ocupado, body.ocupado * { cursor: progress !important; }

#estado-carga {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: #fff; border: 1px solid var(--borde); border-radius: 4px; padding: 16px 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12); font-size: 14px;
}
#estado-carga.error { border-color: #d04343; color: #a02020; }
#escritorio { position: absolute; inset: 0; }

/* ---- ventanas ---- */
.ventana { display: flex; flex-direction: column; background: var(--area-abajo); }
.ventana.principal { position: absolute; inset: 0; border: 1px solid #b9b9b9; }
.marco-ventana-texto { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.marco-ventana-botones { flex: none; display: flex; gap: 4px; font-size: 14px; letter-spacing: 0; }
.marco-ventana {
  background: var(--marco); color: #fff; font-size: 15px; height: 22px; line-height: 22px; padding: 0 4px; display: flex;
  border-bottom: 3px solid var(--marco-borde); white-space: nowrap; overflow: hidden; flex: none;
}
.capa { position: absolute; inset: 0; z-index: 50; background: rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; }
.ventana.emergente .area { flex: none; }
.salida { position: absolute; height: 26px; line-height: 26px; white-space: pre; overflow: hidden; padding-left: 4px; }
.salida.mono { font: 13px var(--mono); }
.salida.resaltado { font-weight: bold; color: #0a5aa0; }
.ventana.emergente { border: 1px solid #7a9ec4; box-shadow: 0 4px 18px rgba(0, 0, 0, .3); max-width: 96vw; max-height: 92vh; }

.titulo {
  flex: none; height: 26px; line-height: 26px; padding: 0 16px; font-size: 17px; font-weight: bold; font-style: italic;
  color: var(--titulo-texto); background: var(--titulo-fondo); border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
}
.area { position: relative; flex: 1; overflow: auto; padding: 8px 4px 4px 12px; background: linear-gradient(var(--area-arriba), var(--area-abajo)); }

/* contenedores acoplados (GuiDockShell) alrededor del área, con su barra de separación */
.acoplados { flex: 1; display: flex; min-height: 0; }
.acoplados-centro { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.acoplados-centro > .area { flex: 1; }
.acoplado { flex: none; display: flex; min-width: 0; min-height: 0; background: #fff; }
.acoplado > * { flex: 1; min-width: 0; min-height: 0; }
.acoplado.izquierda { border-right: 6px solid #d6d6d6; }
.acoplado.derecha { border-left: 6px solid #d6d6d6; }
.acoplado.arriba { border-bottom: 6px solid #d6d6d6; }
.acoplado.abajo { border-top: 6px solid #d6d6d6; }
.titulo { display: flex; align-items: center; gap: 12px; }
.titulo > .control-contenedor, .titulo > .barra-control { flex: none; height: 26px; border: 0; background: none; }

/* ---- menú ---- */
.menu { flex: none; display: flex; align-items: center; background: var(--menu); height: 30px; padding: 0 16px; border-bottom: 1px solid #dcdcdc; }
.menu-raiz { border: 0; background: none; padding: 4px 7px; font: 12px var(--fuente); color: var(--menu-texto); cursor: default; }
.menu-raiz:hover { background: #dfeaf5; }
.menu-locales { margin-left: auto; display: flex; gap: 2px; }
.menu-locales .boton.de-barra { height: 24px; min-width: 28px; border-radius: 0; }
.menu-locales .boton.de-barra.abierto { background: #6fc3ef; border-color: #6fc3ef; }
.menu-locales .icono.fuente { font-size: 15px; line-height: 20px; height: 20px; }
.menu-atajo { margin-left: auto; padding-left: 24px; color: inherit; }
.menu-lista .menu-item { padding: 2px 10px 2px 26px; min-height: 19px; }
.menu-lista .menu-item:not(.inactivo):hover { background: #6fc3ef; }
.menu-lista .menu-separador { margin: 1px 0; background: #d0d0d0; }
/* historial de entradas y resultados de la búsqueda mientras se escribe (TypeAheadPopup) */
.lista-ayuda { position: fixed; z-index: 1500; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid #a0a0a0;
  box-shadow: 2px 3px 8px rgba(0,0,0,.2); font: 12px var(--fuente); }
.ayuda-titulo { padding: 2px 6px; background: #e5e5e5; color: #333; border-bottom: 1px solid #ccc; }
.ayuda-fila { display: flex; align-items: center; min-height: 19px; padding: 0 6px; gap: 12px; white-space: nowrap; cursor: default; }
.ayuda-fila.cabecera { background: #e5e5e5; color: #333; border-bottom: 1px solid #ccc; }
.ayuda-fila.datos { border-bottom: 1px solid #e0e0e0; }
.ayuda-fila.marcada, .ayuda-fila.datos:hover, .ayuda-fila.historial:hover, .ayuda-fila.mas:hover { background: #d1e9f4; }
.ayuda-fila.mas { color: #0a6ed1; } .ayuda-fila.mensaje { color: #333; }
.ayuda-celda { flex: 1 0 auto; } .ayuda-celda:first-child { min-width: 40px; }
.ayuda-borrar { margin-left: auto; border: 0; background: none; color: #888; font-size: 10px; cursor: default; }

/* cuadro "Acerca de" y "Más información" */
.capa-dialogo { position: fixed; z-index: 2000; background: transparent; }
.dialogo-acerca { background: #fff; border: 2px solid #000; box-shadow: 0 4px 18px rgba(0,0,0,.3); }
.dialogo-acerca .marco-ventana, .dialogo-info .marco-ventana { font-size: 12px; height: 20px; line-height: 20px; border-bottom: 0; }
.dialogo-cerrar { border: 0; background: none; color: #fff; font-size: 14px; cursor: default; }
.dialogo-acerca-cuerpo { position: relative; width: 500px; height: 370px; }
.dialogo-acerca-cuerpo img { position: absolute; left: 0; top: 0; }
.dialogo-acerca-texto { position: absolute; left: 14px; top: 240px; width: 320px; white-space: pre; font: bold 10px var(--fuente); line-height: 13px; color: #2a5a8a; }
.dialogo-acerca .boton { position: absolute; left: 335px; width: 155px; height: 24px; justify-content: center; }
.dialogo-mas { top: 293px; } .dialogo-ok { top: 327px; }
.dialogo-ok:focus { outline: 1px dashed #000; outline-offset: -3px; }
.dialogo-info { background: #f2f2f2; border: 1px solid #7a9ec4; width: 620px; display: flex; flex-direction: column; }
.dialogo-info textarea { height: 260px; margin: 10px; font: 12px var(--mono); resize: none; }
.dialogo-pie { display: flex; justify-content: flex-end; padding: 0 10px 10px; }
.dialogo-pie .boton { position: static; }
.menu-lista { position: fixed; z-index: 1000; min-width: 200px; background: #fff; border: 1px solid #a8a8a8; box-shadow: 2px 3px 8px rgba(0, 0, 0, .2); padding: 2px 0; }
.menu-lista .menu-lista { position: absolute; }
.menu-item { position: relative; padding: 4px 26px 4px 22px; white-space: nowrap; cursor: default; }
.menu-item:hover { background: #dfeaf5; }
.menu-item.inactivo { color: #a5a5a5; }
.menu-item { display: flex; align-items: center; gap: 6px; }
.menu-item > .icono { position: absolute; left: 3px; }
.menu-item.marcado::before { content: "✓"; position: absolute; left: 6px; color: #333; }
.menu-item.con-submenu::after { content: "▸"; position: absolute; right: 8px; color: #666; }
.menu-separador { height: 1px; background: #e0e0e0; margin: 3px 0; }

/* ---- barras de herramientas ---- */
.barra { flex: none; display: flex; align-items: center; gap: 1px; padding: 0 16px; background: var(--barra); min-height: 42px; flex-wrap: wrap; }
.barra.sistema { border-bottom: 1px solid #e3e3e3; }
.barra.aplicacion { background: var(--titulo-fondo); min-height: 32px; padding: 0 10px; border-bottom: 1px solid #e3e3e3; }
.barra.abajo { justify-content: flex-end; border-top: 1px solid #dcdcdc; border-bottom: 0; background: var(--titulo-fondo); }
.separador { width: 1px; height: 18px; background: transparent; margin: 0 6px; }
.boton { font: 12px var(--fuente); color: var(--texto); background: #fafafa; border: 1px solid #b7b7b7; border-radius: 2px; padding: 0 8px; height: 22px; cursor: default; white-space: nowrap; overflow: hidden; display: inline-flex; align-items: center; gap: 4px; }
.boton:hover:not(:disabled) { border-color: var(--azul); background: #eaf3fc; }
.boton:disabled { cursor: default; }
.boton:disabled .icono { opacity: .35; filter: grayscale(.4); }
.boton:disabled span { color: #9a9a9a; }
.boton.de-barra { min-width: 26px; height: 26px; padding: 0 4px; background: none; border-color: transparent; justify-content: center; }
.boton.de-barra:hover:not(:disabled) { border-color: #b7b7b7; background: #fff; }
.barra.aplicacion .boton.de-barra.con-texto { padding: 0 6px; }
.icono { width: 16px; height: 16px; image-rendering: auto; flex: none; }
.boton.de-barra .icono { width: 18px; height: 18px; }
/* iconos de la fuente de SAP GUI: glifos superpuestos de distinto color */
@font-face { font-family: "SAP-icons"; src: url("iconos/sap-icons.ttf") format("truetype"); font-display: block; }
.icono.fuente { position: relative; display: inline-block; width: auto; min-width: 16px; height: 16px; font: 15px/16px "SAP-icons"; text-align: center; }
.icono.fuente > span { position: absolute; left: 0; right: 0; top: 0; }
.icono.fuente > span:first-child { position: static; }
.barra.sistema .boton.de-barra .icono.fuente { font-size: 20px; line-height: 22px; height: 22px; min-width: 22px; width: auto; }
.barra.aplicacion .boton.de-barra .icono.fuente { font-size: 19px; line-height: 22px; height: 22px; min-width: 20px; width: auto; }

/* ---- pantalla clásica (cuadrícula de 8 x 26 píxeles) ---- */
.contenedor { position: absolute; }
.GuiUserArea { position: relative; min-width: 100%; min-height: 100%; }
.etiqueta { position: absolute; height: 26px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 0; }
.etiqueta.vinculo { color: var(--azul); cursor: pointer; text-decoration: underline; }
.etiqueta.resaltado { font-weight: bold; }
.campo { position: absolute; margin-top: 1px; height: 24px; font: 13px var(--mono); padding: 0 3px; border: 1px solid var(--campo-borde); border-radius: 0; background: #fff; color: #000; outline: none; }
.campo:focus { border: 1px dashed #000; }
.boton-f4 { position: absolute; width: 16px; padding: 0; border: 1px solid var(--campo-borde); border-left: 0; box-sizing: border-box;
  background: #fff; display: flex; align-items: center; justify-content: center; cursor: default; z-index: 2; }
.boton-f4:hover { background: #eaf3fc; }
.boton-f4 .icono.fuente { font-size: 14px; line-height: 16px; min-width: 14px; }
.campo.solo-lectura { background: var(--solo-lectura); border-color: #d7d7d7; }
.campo.obligatorio { background-image: linear-gradient(90deg, #f0ab00 2px, transparent 2px); }
.barra .campo { position: static; margin: 0; }
.barra .campo.okcode { height: 22px; margin: 0 2px 0 4px; }
.okcode-plegar { color: #666; font-size: 18px; margin: 0 6px 2px 0; cursor: default; }
.boton:not(.de-barra) { position: absolute; margin-top: 2px; }
.boton.solo-icono:not(.de-barra) { padding: 0; justify-content: center; min-width: 24px; }
.casilla { position: absolute; display: flex; align-items: center; gap: 4px; height: 26px; white-space: nowrap; padding-left: 6px; }

/* combos */
.combo { position: absolute; margin-top: 1px; height: 24px; font: 12px var(--fuente); border: 1px solid var(--campo-borde); background: #fff; padding: 0 2px; }
.combo:focus { outline: 1px dashed #000; }

/* pestañas (Blue Crystal): pestañas planas, la activa en azul, y una línea azul bajo la fila */
.pestanas { position: absolute; }
.pestanas-fila { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; align-items: center; padding-left: 16px; overflow: hidden; border-bottom: 2px solid var(--azul); }
.pestana { font: 12px var(--fuente); height: 22px; padding: 0 10px; white-space: nowrap; flex: none; border: 1px solid #b5b5b5; margin-right: -1px; background: #fff; color: #000; cursor: default; }
.pestana.activa { background: #009de0; border-color: #009de0; color: #fff; }
.pestana:not(.activa):hover { background: #eaf3fc; }
.pestanas-pagina { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; background: #f5f9fd; }

/* tablas de dynpro (GuiTableControl): cabecera gris, líneas de cuadrícula y celdas sin borde propio */
.tabla { position: absolute; overflow: auto; background: #fff; border: 1px solid #c8c8c8; }
.tabla-interior { position: relative; }
.tabla-cabecera { position: absolute; left: 0; right: 0; top: 0; height: 24px; background: #e5e5e5; border-bottom: 1px solid #ccc; }
.tabla-esquina { position: absolute; left: 0; top: 0; width: 18px; height: 24px; border-right: 1px solid #ccc; }
.tabla-titulo { position: absolute; top: 0; height: 24px; line-height: 24px; padding: 0 4px; border-right: 1px solid #ccc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: #333; display: flex; align-items: center; justify-content: center; gap: 2px; }
.tabla-titulo.derecha { justify-content: flex-end; }
.tabla-titulo.seleccionada, .tabla-fila.seleccionada .tabla-celda { background: #d1e9f4; }
.tabla-fila { position: absolute; left: 0; right: 0; height: 26px; }
.tabla-selector { position: absolute; left: 1px; top: 1px; width: 16px; height: 24px; background: #fff; border: 1px solid #c8c8c8; }
.tabla-fila.seleccionada .tabla-selector { background: #bbdeef; }
.tabla-celda { position: absolute; top: 0; height: 26px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #ececec; }
.en-tabla { margin: 0 !important; border: 0 !important; background: transparent !important; box-sizing: border-box; }
input.en-tabla { padding: 0 3px; }
input.en-tabla:not([readonly]) { background: #fff !important; }
.casilla.en-tabla { justify-content: center; padding: 0; }

/* listas ABAP (GuiListContainer): página visible + barras de desplazamiento que piden a SAP la posición */
.lista-abap { position: absolute; background: #fff; border: 1px solid #d6d6d6; }
.lista-vista { position: absolute; left: 0; top: 0; right: 17px; bottom: 17px; overflow: hidden; }
.lista-interior { position: absolute !important; top: 0; }
.de-lista { height: 19px !important; line-height: 19px !important; font: 13px var(--mono) !important; padding: 0 !important; margin: 0 !important; }
.etiqueta.de-lista { white-space: pre; text-overflow: clip; }
input.de-lista { border: 0 !important; background: transparent; }
input.de-lista:not([readonly]) { background: #fff; outline: 1px solid #bfbfbf; outline-offset: -1px; }
.casilla.de-lista { padding: 0; gap: 0; }
.casilla.de-lista input { margin: 0 2px; width: 13px; height: 13px; }
.de-lista.resaltado { font-weight: bold !important; }
.de-lista.lista-foco { outline: 1px dashed #000; outline-offset: -1px; }
.de-lista:focus { outline: none; }
/* colores de lista de Blue Crystal: fondo (normal/intensificado) y texto de color (inverso) */
.lc-cabecera.con-fondo { background: #d9e4ef; } .lc-cabecera-int.con-fondo { background: #c5d6e8; } .lc-cabecera-inv { color: #2d5f8f; }
.lc-normal.con-fondo { background: #f7f7f7; } .lc-normal-int.con-fondo { background: #ebf0f5; } .lc-normal-inv { color: #3e6a96; }
.lc-total.con-fondo { background: #fff5c2; } .lc-total-int.con-fondo { background: #ffec99; } .lc-total-inv { color: #9a7400; }
.lc-clave.con-fondo { background: #a9dcf3; } .lc-clave-int.con-fondo { background: #a2c3ea; } .lc-clave-inv { color: #1f5aa6; }
.lc-positivo.con-fondo { background: #d6eccf; } .lc-positivo-int.con-fondo { background: #b5dca8; } .lc-positivo-inv { color: #2b7a0b; }
.lc-negativo.con-fondo { background: #f8d3d3; } .lc-negativo-int.con-fondo { background: #f0a9a9; } .lc-negativo-inv { color: #bb0000; }
.lc-grupo.con-fondo { background: #f6e1c5; } .lc-grupo-int.con-fondo { background: #ecc48f; } .lc-grupo-inv { color: #b1762f; }
.barra-desp { position: absolute; display: flex; background: #f0f0f0; }
.barra-desp.vertical { right: 0; top: 0; bottom: 17px; width: 17px; flex-direction: column; }
.barra-desp.horizontal { left: 0; right: 17px; bottom: 0; height: 17px; }
.barra-desp.inactiva > * { display: none; }
.barra-desp-flecha { flex: none; width: 17px; height: 17px; position: relative; cursor: default; }
.barra-desp-flecha::before { content: ""; position: absolute; left: 6px; top: 6px; width: 4px; height: 4px; border-left: 1.5px solid #666; border-top: 1.5px solid #666; }
.vertical .menos::before { transform: rotate(45deg); top: 7px; } .vertical .mas::before { transform: rotate(225deg); top: 4px; }
.horizontal .menos::before { transform: rotate(-45deg); left: 7px; } .horizontal .mas::before { transform: rotate(135deg); left: 4px; }
.barra-desp-carril { flex: 1; position: relative; }
.barra-desp-cursor { position: absolute; background: #c1c1c1; border-radius: 0; }
.vertical .barra-desp-cursor { left: 4px; right: 4px; }
.horizontal .barra-desp-cursor { top: 4px; bottom: 4px; }
.barra-desp-cursor:hover { background: #a8a8a8; }

/* contenedor con desplazamiento propio (subpantallas con OuterGuiBounds) */
.desplazable { position: absolute; overflow: auto; }
.desplazable-interior { position: relative !important; }

/* controles: área del dynpro, contenedores, divisor y árbol */
.area-control { position: absolute; display: flex; }
.area-control > *, .control-contenedor > *, .divisor-celda > * { flex: 1; min-width: 0; min-height: 0; }
.control-contenedor { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.divisor { display: grid; flex: 1; min-height: 0; gap: 0; }
.divisor-celda { display: flex; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.divisor-barra { position: absolute; z-index: 5; }
.divisor-barra.vertical { left: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; }
.divisor-barra.horizontal { left: 0; right: 0; top: 0; height: 6px; cursor: row-resize; }
/* barra del divisor entre celdas, con su asa punteada como en SAP GUI */
.divisor-celda + .divisor-celda { border-left: 6px solid #d6d6d6; position: relative; }
.divisor-celda + .divisor-celda::before { content: ""; position: absolute; left: -4px; top: 50%; width: 2px; height: 16px; margin-top: -8px; background: repeating-linear-gradient(#888 0 1px, transparent 1px 3px); }
.control-generico { flex: 1; }
.control-imagen { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f7f7f7; }
.control-imagen img { max-width: 100%; max-height: 100%; }
.barra-control { flex: none !important; display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 2px; background: var(--barra); border-bottom: 1px solid #dcdcdc; overflow: hidden; }
.barra-control .boton.de-barra { height: 22px; min-width: 22px; padding: 0 4px; gap: 4px; }
.barra-control .boton.de-barra.con-texto { border-color: #c4c4c4; background: #fff; }
.barra-control .boton.marcado { background: #dbe9f6; border-color: #9ec1e3; }
/* editor de texto (SapTextEdit) */
.editor-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border: 1px solid #c8c8c8; }
.editor-cuerpo { flex: 1; display: flex; min-height: 0; }
.editor-numeros { flex: none; width: 48px; overflow: hidden; white-space: pre; text-align: right; padding: 2px 6px 2px 0;
  font: 13px/18px var(--mono); color: #8a8a8a; background: #f2f2f2; border-right: 1px solid #ddd; user-select: none; }
.editor-texto-area { flex: 1; margin: 0; padding: 2px 6px; overflow: auto; font: 13px/18px var(--mono); color: #000;
  border: 0; outline: none; resize: none; white-space: pre; tab-size: 8; }
.editor-texto-area.solo-lectura { background: #fff; cursor: text; }
.editor-texto-area.solo-lectura > div { min-height: 18px; }
.editor-texto-area .comentario, .editor-texto-area > .comentario { color: #4f7fb0; font-style: italic; }
.editor-estado { flex: none; height: 22px; line-height: 22px; padding: 0 8px; background: #f2f2f2; border-top: 1px solid #ddd; color: #333; }

/* grilla ALV */
.grilla-marco { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.grilla-barra { border: 1px solid #c8c8c8; border-bottom: 0; background: #f9f9f9; height: 30px; padding: 0 4px; }
.grilla-barra .boton.de-barra { border-color: #c4c4c4; background: #fff; height: 22px; }
.boton.flecha-menu { min-width: 10px !important; width: 10px; padding: 0 !important; margin-left: -3px; position: relative; }
.boton.flecha-menu::after { content: ""; position: absolute; left: 2px; bottom: 4px; border: 3px solid transparent; border-top-color: #555; }
/* colores de celda de la grilla (Blue Crystal) */
.grilla td.gc-cabecera { background: #d9e4ef; } .grilla td.gc-cabecera-int { background: #c5d6e8; }
.grilla td.gc-normal { background: #f2f2f2; } .grilla td.gc-normal-int { background: #e8eef4; }
.grilla td.gc-total { background: #fffdbf; } .grilla td.gc-total-int { background: #fff3a3; }
.grilla td.gc-clave { background: #a6e5f4; } .grilla td.gc-clave-int { background: #7fc9eb; }
.grilla td.gc-positivo { background: #d6eccf; } .grilla td.gc-positivo-int { background: #b5dca8; }
.grilla td.gc-negativo { background: #f8d3d3; } .grilla td.gc-negativo-int { background: #f0a9a9; }
.grilla td.gc-grupo { background: #f6e1c5; } .grilla td.gc-grupo-int { background: #ecc48f; }
.grilla td[class*="-inv"] { background: #fff; }
.grilla td.gc-clave-inv { color: #1f5aa6; } .grilla td.gc-positivo-inv { color: #2b7a0b; } .grilla td.gc-negativo-inv { color: #bb0000; } .grilla td.gc-total-inv { color: #9a7400; }
.grilla { flex: 1; min-height: 0; min-width: 0; overflow: auto; background: #fff; border: 1px solid #c8c8c8; }
.grilla table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; font: 12px var(--fuente); }
.grilla th, .grilla td { height: 22px; padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: left; background: #eaedf0; }
.grilla thead th { position: sticky; top: 0; z-index: 2; background: #e5e5e5; color: #333; font-weight: normal; height: 24px; border-color: #ccc; }
.grilla tbody th { background: #e5e5e5; border-color: #ccc; }
.grilla td.fija, .grilla th.fija { position: sticky; left: 18px; z-index: 1; }
.grilla thead th.fija { z-index: 3; background: #e5e5e5; }
.grilla td.derecha { text-align: right; } .grilla td.centro { text-align: center; }
.grilla td.hotspot { color: #0a6ed1; cursor: pointer; } .grilla td.hotspot:hover { text-decoration: underline; }
.grilla tbody tr:hover td { background: #eef5fc; }
.grilla tr.espaciador td, .grilla tr.espaciador { height: auto; border: 0; padding: 0; }
.grilla tr.actual td, .grilla tr.actual th { background: #d1e9f4; }
.grilla tbody th { cursor: pointer; }
.grilla tr.seleccionada td, .grilla tr.seleccionada th { background: #bbdeef !important; }
.control-html { flex: 1; display: flex; background: #fff; }
.control-html iframe { flex: 1; border: 0; width: 100%; height: 100%; }
.arbol { flex: 1; overflow: auto; background: #fff; border: 1px solid #dcdcdc; padding: 4px 0; user-select: none; }
.arbol ul { list-style: none; margin: 0; padding: 0; }
.arbol-cabecera { position: sticky; top: -4px; margin-top: -4px; margin-bottom: 4px; height: 24px; background: #e5e5e5; border-bottom: 1px solid #ccc; display: flex; z-index: 1; }
.arbol-cabecera-celda { height: 24px; line-height: 24px; padding: 0 6px; border-right: 1px solid #ccc; white-space: nowrap; overflow: hidden; color: #333; }
.arbol-fila { display: flex; align-items: center; gap: 4px; height: 22px; white-space: nowrap; cursor: default; padding-right: 8px; }
.arbol-fila:hover { background: #eef5fc; }
.arbol-fila.seleccionado { background: transparent; }
.arbol-fila.seleccionado .arbol-elemento { background: #d1e9f4; outline: 1px dashed #000; outline-offset: -1px; }
.arbol-elemento { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.arbol-elemento input { margin: 0; }
.boton-arbol { cursor: pointer; border-radius: 2px; padding: 0 2px; }
.boton-arbol:hover { background: #fff; outline: 1px solid #b7b7b7; }
.enlace-arbol span { color: #0a6ed1; cursor: pointer; } .enlace-arbol span:hover { text-decoration: underline; }
.arbol-flecha { position: relative; width: 12px; height: 12px; flex: none; }
.arbol-flecha.cerrado::before, .arbol-flecha.abierto::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 5px; height: 5px;
  border-right: 1.5px solid #555; border-bottom: 1.5px solid #555; transform: rotate(-45deg);
}
.arbol-flecha.abierto::before { left: 3px; top: 1px; transform: rotate(45deg); }

/* marcos y grupos: caja blanca con el título subrayado en azul (Blue Crystal) */
.marco { position: absolute; border: 1px solid #dcdcdc; background: rgba(255, 255, 255, .55); }
.marco-titulo { position: absolute; top: 0; left: 0; right: 0; height: 22px; line-height: 20px; padding: 0 6px; font-weight: bold; color: #333; border-bottom: 2px solid var(--azul); }
.marco.grupo { background: #f7fafd; }
.grupo-interior { left: 0; top: 26px; right: 0; bottom: 0; }
.marco.grupo > .marco-titulo { font-weight: normal; }
.linea { position: absolute; border-top: 1px solid #c8c8c8; }
.desconocido { position: absolute; border: 1px dashed #c9a; color: #a68; font-size: 11px; padding: 2px; overflow: hidden; }

/* ---- barra de estado ---- */
.estado { flex: none; position: relative; display: flex; align-items: center; height: 28px; padding: 0 8px; background: var(--menu); border-top: 1px solid #dcdcdc; }
.estado-mensaje { flex: 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.estado-mensaje span { overflow: hidden; text-overflow: ellipsis; }
.estado-logo { position: absolute; left: 50%; transform: translateX(-50%); height: 18px; }
.estado-sistema { display: flex; gap: 0; color: #333; }
.estado-sistema span { padding: 0 8px; border-left: 1px solid #c8c8c8; }
.estado-sistema span:first-child { border-left: 0; }