/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: SE09 / SE10 (organizador de transportes).
 * Numero = linea donde empieza el comentario de esa parte (el texto es el del propio comentario).
 *
 *   linea 13: SE09 / SE10: Organizador de transportes (órdenes de workbench, customizing y transportes de copias) [menciona #w-se09]
 *   linea 55: Organizador de transportes en gris, como las capturas de SE10 (beige-gris #d9d7c6 / #ebead8 / #cccbbc)...
 *   linea 64: árbol: sin marco blanco, directo sobre el gris, en Courier New como SAP GUI
 *   linea 71: detalle de la orden (pestañas Propiedades / Objetos / Documentación)
 *   linea 84: mensaje de la barra de estado: misma tipografía que PA30 / PE02 / PC00_M29_CALC
 *   linea 87: Lista de ordenes como el "Display Request" de la captura de SE10 (colores medidos de la foto): fondo g...
 * ========================================================================= */
/* SE09 / SE10: Organizador de transportes (órdenes de workbench, customizing y transportes de copias) */
:where(#w-se09) :where(.sx__body, .sx__body *, .sx__msg) { color: #000; }
:where(#w-se09) :where(.sapx__menu, .sapx__menu *) { color: inherit; }
#w-se09 { position: relative; }
.se9__tree { margin: 8px; padding: 6px 4px; background: #fff; box-shadow: inset 1px 1px #8a8f96, inset -1px -1px #fff; font: 12px/1.5 'Courier New', monospace; min-width: 0; }
.se9__root { padding: 0 2px 4px; white-space: nowrap; }
.se9__nil { margin: 6px 4px; font-family: Tahoma, Arial, sans-serif; font-style: italic; }
.se9__c { margin-left: 11px; padding-left: 10px; border-left: 1px dotted #555; }
.se9__c[hidden] { display: none; }
.se9__f, .se9__r { display: flex; align-items: center; gap: 5px; max-width: 100%; margin: 2px 0; padding: 0 3px; border: 0; background: transparent; color: #000; font: inherit; text-align: left; cursor: default; white-space: nowrap; }
.se9__f svg, .se9__r svg { flex: none; width: 15px; height: 15px; }
.se9__f span { padding: 0 4px; }
.se9__f1 span { background: #5ec3ee; }
.se9__f2 span { background: #a9defa; }
.se9__f3 span { background: #d3e8f8; }
.se9__r b { font-weight: 400; padding: 0 2px; }
.se9__u, .se9__r em { color: #1c3f94; font-style: normal; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.se9__r:hover b, .se9__r.is-sel b { background: #1c3f94; color: #fff; }
.se9__r.is-sel { outline: 1px dotted #000; outline-offset: -1px; }
.se9__sel .sx__grp { margin-bottom: 14px; }
.se9__req { display: flex; flex-direction: column; margin: 6px; min-width: 0; }
.se9__rrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 6px 8px; background: #c3d3e0; }
.se9__fld { min-width: 140px; padding: 2px 6px; background: #d9d8c6; box-shadow: inset 1px 1px #8a8f96, inset -1px -1px #fff; font-family: 'Courier New', monospace; }
.se9__rt { padding: 0 6px; }
.se9__req .dbg__pane { display: block; }
.se9__scroll { overflow-x: auto; max-width: 100%; }
.se9__tbl td { max-width: none; }
.se9__doc { padding: 10px 12px; background: #fff; line-height: 1.5; }
.se9__dlg { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 8px; background: rgba(0, 0, 0, .18); }
.se9__box { width: min(380px, 100%); background: #d9d8c6; border: 1px solid #1c3f94; box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.se9__bt { padding: 3px 8px; background: #1c3f94; color: #fff; font-weight: 700; }
.se9__bb { display: grid; gap: 8px; padding: 10px 12px 12px; }
.se9__rd { display: grid; gap: 3px; }
.se9__rd label { display: flex; align-items: center; gap: 6px; }
.se9__ln { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: center; }
.se9__ln input { padding: 2px 4px; border: 0; background: #fffbe6; box-shadow: inset 1px 1px #b5b29f; color: #000; font: inherit; }
.se9__ln input:disabled { background: #cfcdbb; }
.se9__ln input.is-req { background: #ffe98a; }
.se9__bn { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.se9__bn svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .se9__ln { grid-template-columns: 1fr; gap: 2px; } .se9__f, .se9__r { white-space: normal; flex-wrap: wrap; } }

/* Organizador de transportes en gris, como las capturas de SE10 (beige-gris #d9d7c6 / #ebead8 / #cccbbc).
   La pantalla de selección conserva el fondo azul grisáceo de la captura; el árbol de órdenes y el detalle van sobre gris.
   #se9-body recibe data-v (init | list | req | det) desde sap.js (se9.draw). Para revertir: borrar este bloque. */
#se9-body[data-v="list"], #se9-body[data-v="req"] { background: #ebead8; }
#se9-body[data-v="det"] { background: #d9d7c6; }
#se9-body[data-v="init"] { background: #95b2c3; }
#se9-body[data-v="init"] .sx__grp { background: #d9d7c6; border-color: #a2a194; }
#se9-body[data-v="init"] .sx__rec input:not([type="checkbox"]) { background: #cccbbc; box-shadow: inset 1px 1px #a2a194; }
#se9-body[data-v="init"] .sx__rec input.is-req { background: #cccbbc; }
/* árbol: sin marco blanco, directo sobre el gris, en Courier New como SAP GUI */
#se9-body .se9__tree { flex: 1 1 100%; margin: 0; padding: 14px 16px; background: transparent; box-shadow: none; font: 13px/1.6 'Courier New', Courier, monospace; }
.se9__nil { font-family: 'Courier New', Courier, monospace; font-style: normal; }
.se9__f1 span { background: #5ec3ee; }
.se9__f2 span { background: #a9defa; }
.se9__f3 span { background: #d3e8f8; }
.se9__u, .se9__r em { color: #1c3f94; }
/* detalle de la orden (pestañas Propiedades / Objetos / Documentación) */
#se9-body[data-v="det"] .se9__req { flex: 1 1 100%; margin: 8px; }
.se9__rrow { background: #95b2c3; }
.se9__fld { background: #cccbbc; box-shadow: inset 1px 1px #a2a194, inset -1px -1px #fff; }
.se9__req .dbg__tabs button { background: #cccbbc; border-color: #a2a194; }
.se9__req .dbg__tabs button.is-on { background: #d9d7c6; }
.se9__req .dbg__pane { background: #d9d7c6; border-color: #a2a194; }
.se9__tbl th { background: #d9d7c6; }
.se9__tbl td { background: #cccbbc; border-color: #b5b4a5; }
.se9__tbl tr.is-top td:not(.c) { background: #cccbbc; }
.se9__doc { background: #cccbbc; }
.se9__req .pc__sum { background: #d9d7c6; }
.se9__req .pc__sum dd { background: #cccbbc; padding: 1px 6px; }
/* mensaje de la barra de estado: misma tipografía que PA30 / PE02 / PC00_M29_CALC */
#se9-msg { font-family: inherit; font-size: 12px; font-style: normal; }

/* Lista de ordenes como el "Display Request" de la captura de SE10 (colores medidos de la foto):
   fondo gris #ebead8, tipografia Courier (la que usaba SAP GUI para listas: Courier New; se usa la del equipo si existe y, si no, FreeMono embebida en fonts/sap-courier.woff),
   carpetas en cajitas celestes, conectores en L negros, nivel 1 celeste con su descripcion al lado, nivel 2 sin fondo, nivel 3 y ordenes en celeste claro,
   usuario y texto en azul. La orden seleccionada / bajo el cursor va en azul oscuro con letra BLANCA.
   Cada fila mide 34px (el centro, a 17px, es donde se dibujan los conectores). Para revertir: borrar este bloque y el @font-face. */
@font-face { font-family: 'SAP Courier'; src: local('Courier New'), local('CourierNewPSMT'), url('../fonts/sap-courier.woff') format('woff'); font-weight: 400; font-style: normal; }
#se9-body[data-v="list"], #se9-body[data-v="req"] { background: #ebead8; }
#se9-body .se9__tree { padding: 12px 14px 22px; font: 15px/1.2 'SAP Courier', 'Courier New', Courier, monospace; color: #000; }
#se9-body .se9__root { padding: 0 0 10px; color: #000; font-size: 15px; }
#se9-body .se9__c { margin-left: 2px; padding-left: 32px; border-left: 0; }
#se9-body .se9__c0 { margin-left: 6px; }
#se9-body .se9__f, #se9-body .se9__r { min-height: 34px; margin: 0; padding: 0 3px; gap: 6px; color: #000; font: inherit; }
#se9-body .se9__f svg { width: 20px; height: 18px; }
#se9-body .se9__f svg .fb { fill: #5dcbfd; }
#se9-body .se9__f3 svg .fb { fill: #b8e6fc; }
#se9-body .se9__c > .se9__g, #se9-body .se9__c > .se9__r { position: relative; }
#se9-body .se9__c > .se9__g::before, #se9-body .se9__c > .se9__r::before { content: ''; position: absolute; left: -22px; top: 0; bottom: 0; border-left: 1px solid #000; }
#se9-body .se9__c > :last-child::before { bottom: auto; height: 17px; }
#se9-body .se9__c > .se9__g::after, #se9-body .se9__c > .se9__r::after { content: ''; position: absolute; left: -22px; top: 17px; width: 19px; border-top: 1px solid #000; }
#se9-body .se9__f span { padding: 1px 5px; color: #000; }
#se9-body .se9__f1 span { background: #5dcbfd; }
#se9-body .se9__f1 i { font-style: normal; padding: 0 4px; color: #000; }
#se9-body .se9__f2 span { background: transparent; padding-left: 0; }
#se9-body .se9__f3 span { background: #cbe8fb; min-width: min(230px, 70vw); }
#se9-body .se9__r b { color: #000; background: #cbe8fb; padding: 1px 2px; font-weight: 400; }
#se9-body .se9__u, #se9-body .se9__r em { color: #1a3d9c; background: transparent; }
#se9-body .se9__r:hover b, #se9-body .se9__r.is-sel b { background: #1c3f94; color: #fff; }
@media (min-width: 601px) {
  #se9-body .se9__r b { flex: none; width: 11ch; }
  #se9-body .se9__r .se9__u { flex: none; width: 13ch; }
}

/* Resaltado en GRIS (antes celeste/azul): carpetas de nivel 1 y 3, orden y seleccion / cursor.
   Va al final para pisar los colores anteriores. Para volver al celeste: borrar este bloque. */
#se9-body .se9__f1 span { background: #c0bfb0; }
#se9-body .se9__f3 span { background: #d3d2c4; }
#se9-body .se9__r b { background: #d3d2c4; }
#se9-body .se9__r:hover b, #se9-body .se9__r.is-sel b { background: #808080; color: #fff; }