/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: relieve 3D de SAP Logon (iconos, barras, solapas, marcos), SE38 y dump.
 * Numero = linea donde empieza el comentario de esa parte (el texto es el del propio comentario).
 *
 *   linea 18: SAP Logon con relieve (referencia: capturas de SAP GUI, PA30 y Debugger ABAP). Solo toca las ventanas...
 *   linea 21: Iconos: sin "crispEdges" (los degradados y brillos necesitan suavizado)
 *   linea 33: Barras de herramientas con degradado y borde en relieve
 *   linea 39: Boton de aplicacion (Crear, Modificar, Seleccionar...): placa suave con sombra
 *   linea 44: Iconos de la barra estandar: planos, pero al pasar el mouse o presionar se levantan / hunden
 *   linea 50: Solapas (PA30 y Debugger): trapecio con degradado y sombra
 *   linea 64: Marcos, paneles y listas con relieve
 *   linea 73: SE38 (ABAP Editor): codigo sobre fondo celeste, igual que el Debugger
 *   linea 82: SE38 y su Debugger: el codigo va todo en negro (sin azul en DATA / GET / START-OF-SELECTION, ni marron...
 *   linea 87: SE38 y Debugger: las palabras clave ABAP (DATA, GET, START-OF-SELECTION, IF...) van en azul SAP, disti...
 *   linea 91: Extracto del codigo fuente del dump (ST22): mismas palabras clave en azul que SE38 y el Debugger.
 * ========================================================================= */
/* SAP Logon con relieve (referencia: capturas de SAP GUI, PA30 y Debugger ABAP).
   Solo toca las ventanas SAP (.window--sap). Para volver al aspecto anterior: sacar el <link> de este archivo en index.html. */

/* ---------- Iconos: sin "crispEdges" (los degradados y brillos necesitan suavizado) ---------- */
html .window--sap :is(.sapx__i, .sapx__b, .sapx__ok, .dbg__ic, .sx__app) svg { shape-rendering: geometricPrecision; }
html .window--sap .sapx__i { width: 25px; height: 25px; border-radius: 3px; }
html .window--sap .sapx__i svg { width: 19px; height: 19px; }
html .window--sap .sapx__b svg { width: 17px; height: 17px; }
html .window--sap .sapx__b { gap: 3px; padding: 2px 7px 2px 3px; }
html .window--sap .sapx__b--ico { padding: 2px 2px; }
html .window--sap :is(.sapx__tb2, .sx__app) { gap: 2px; }
html .window--sap .sapx__ok svg { width: 22px; height: 22px; }
html .window--sap .sapx__i.is-off svg, html .window--sap .sapx__b.is-off svg { filter: grayscale(1); opacity: .5; }
html .window--sap .sapx__i.is-off { opacity: 1; }

/* ---------- Barras de herramientas con degradado y borde en relieve ---------- */
html .window--sap .sapx__tb { background: linear-gradient(#d9dde1 0, #c9ced4 55%, #bcc2c9 100%); border-bottom: 1px solid #7f858d; box-shadow: inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .25); position: relative; z-index: 1; }
html .window--sap :is(.sapx__tb2, .sx__app) { background: linear-gradient(#e6e3d5 0, #d9d6c6 60%, #cecbb9 100%); border-bottom: 1px solid #8a8878; box-shadow: inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .22); position: relative; z-index: 1; }
html .window--sap .sapx__sep { background: linear-gradient(90deg, #7d8189 1px, #fff 1px); }
html .window--sap .sapx__tb .sap__cmd { background: #fffff2; border: 0; box-shadow: inset 1px 1px #6f747b, inset 2px 2px #b9bbb0, 1px 1px #fff; }

/* Boton de aplicacion (Crear, Modificar, Seleccionar...): placa suave con sombra */
html .window--sap .sapx__b:not(.is-off) { border: 0; border-radius: 3px; background: linear-gradient(#f6f5ec 0, #e2e0d0 52%, #d0cdbb 100%); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9a9885, 1px 1px 1px rgba(0, 0, 0, .35); }
html .window--sap .sapx__b.is-off { border-radius: 3px; background: transparent; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .8), inset -1px -1px 0 rgba(150, 148, 130, .55); }
html .window--sap .sapx__b:not(.is-off):hover { background: linear-gradient(#fffef6 0, #ebe9d9 52%, #d8d5c3 100%); }
html .window--sap .sapx__b:not(.is-off):active, html .window--sap .sapx__b:not(.is-off).is-down { background: linear-gradient(#cbc8b6, #dad7c6); box-shadow: inset 1px 1px 0 #7d7b6a, inset -1px -1px 0 #f4f3e8; }
/* Iconos de la barra estandar: planos, pero al pasar el mouse o presionar se levantan / hunden */
html .window--sap .sapx__i:not(.is-off):hover { background: linear-gradient(#f4f6f7, #d3d8dc); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #7f858d, 1px 1px 1px rgba(0, 0, 0, .25); }
html .window--sap .sapx__i:not(.is-off):active, html .window--sap .sapx__i.is-down { background: linear-gradient(#bfc5ca, #d3d8dc); box-shadow: inset 1px 1px 0 #666b72, inset -1px -1px 0 #f4f6f7; }
html .window--sap .sapx__i svg, html .window--sap .sapx__b svg { filter: drop-shadow(.5px .8px .4px rgba(0, 0, 0, .28)); }
html .window--sap .sapx__i.is-off svg, html .window--sap .sapx__b.is-off svg { filter: grayscale(1); }

/* ---------- Solapas (PA30 y Debugger): trapecio con degradado y sombra ---------- */
html .window--sap :is(.sx__tabs, .dbg__tabs, .dbg__vt) { filter: drop-shadow(1px 0 0 #6f7b86) drop-shadow(-1px 0 0 rgba(255, 255, 255, .95)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .8)) drop-shadow(1px 1px 1px rgba(0, 0, 0, .28)); }
html .window--sap :is(.sx__tabs, .dbg__tabs) button { position: relative; margin: 0; border: 0; border-radius: 0; box-shadow: none; color: #000; background: linear-gradient(#efeee2 0, #d3d1c1 48%, #b4b19f 100%); clip-path: polygon(0 100%, 8px 0, calc(100% - 8px) 0, 100% 100%); }
html .window--sap .sx__tabs { gap: 2px; }
html .window--sap .sx__tabs button { padding: 4px 18px 3px 14px; }
html .window--sap .dbg__tabs { gap: 2px; padding-left: 4px; }
html .window--sap .dbg__tabs button { padding: 4px 13px 3px 10px; }
html .window--sap :is(.sx__tabs, .dbg__tabs) button.is-on { z-index: 2; background: linear-gradient(#fdfdf7 0, #ebe9da 38%, #dcd9c9 100%); font-weight: 400; }
html .window--sap .sx__tabs button.is-on { font-weight: 700; padding-bottom: 5px; margin-bottom: -1px; }
html .window--sap .dbg__tabs button.is-on { top: 1px; padding-bottom: 4px; }
html .window--sap .dbg__vt button { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 3px 14px 2px 11px; color: #000; background: linear-gradient(#efeee2 0, #d3d1c1 50%, #b4b19f 100%); clip-path: polygon(0 100%, 6px 0, calc(100% - 6px) 0, 100% 100%); }
html .window--sap .dbg__vt { gap: 2px; padding-left: 5px; }
html .window--sap .dbg__vt button.is-on { background: linear-gradient(#fdfdf7 0, #ebe9da 40%, #e4e2d3 100%); }

/* ---------- Marcos, paneles y listas con relieve ---------- */
html .window--sap :is(.sx__pane, .dbg__pane) { box-shadow: inset 1px 1px 0 #f7f6ec, inset -1px -1px 0 #a9a794, 1px 2px 3px rgba(0, 0, 0, .28); }
html .window--sap :is(.sx__find, .dbg__box) { box-shadow: inset 1px 1px 0 #f7f6ec, 1px 1px 3px rgba(0, 0, 0, .3); }
html .window--sap .sx__its { border: 0; box-shadow: inset 1px 1px 0 #6f6d60, inset -1px -1px 0 #f4f3e8, inset 2px 2px 3px rgba(0, 0, 0, .22); }
html .window--sap :is(.sx__per, .sx__dir, .sx__grp), html .window--sap .sx fieldset { border-color: #86846f; border-radius: 2px; box-shadow: inset 1px 1px 0 #fbfaf2, 1px 1px 0 #fbfaf2, 1px 2px 3px rgba(0, 0, 0, .2); }
html .window--sap :is(.sx__rec, .sx__pn, .sx__dir) input:not([type="radio"]):not([type="checkbox"]) { box-shadow: inset 1px 1px 0 #7d7b6c, inset 2px 2px 2px rgba(0, 0, 0, .15), 1px 1px 0 #fff; }
html .window--sap .sx__pn .sx__f4 { border-radius: 3px; background: linear-gradient(#f6f5ec, #d6d3c1); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9a9885, 1px 1px 1px rgba(0, 0, 0, .35); }
html .window--sap .sx__msg, html .window--sap .sapx__status { box-shadow: inset 0 1px 0 #fff, 0 -1px 2px rgba(0, 0, 0, .12); }

/* ---------- SE38 (ABAP Editor): codigo sobre fondo celeste, igual que el Debugger ---------- */
html .window--sap #se-code { background: #e6f1f2; border: 1px solid #7a8a98; box-shadow: inset 1px 1px 0 #8a8f96, inset 2px 2px 3px rgba(60, 80, 100, .18); font: 12px/16px 'Courier New', monospace; }
html .window--sap #se-code > div { height: 16px; }
html .window--sap #se-code i { width: 36px; padding-right: 6px; color: #5a6a94; background: #e6f1f2; }
html .window--sap #se-code .se__g { background: #d4e3ea; border-right: 1px solid #c3d6df; }
html .window--sap #se-code code { padding-left: 6px; }
html .window--sap #se-code b { color: #1a1aa6; }
html .window--sap #se-code em { color: #5a6a94; }

/* SE38 y su Debugger: el codigo va todo en negro (sin azul en DATA / GET / START-OF-SELECTION, ni marron en textos) y el breakpoint mas grande. */
html .window--sap #se-code b, html .window--sap #se-code em, html .window--sap #se-code s,
html .window--sap .dbg__ln b, html .window--sap .dbg__ln em, html .window--sap .dbg__ln s { color: #000; }
html .window--sap #se-code .se__g svg, html .window--sap .dbg__g svg { width: 14px; height: 14px; }

/* SE38 y Debugger: las palabras clave ABAP (DATA, GET, START-OF-SELECTION, IF...) van en azul SAP, distinto del negro del resto del codigo y del celeste del fondo.
   Textos entre comillas y comentarios siguen en negro. Para cambiar el tono: editar #0a4fd6. */
html .window--sap #se-code b, html .window--sap .dbg__ln b { color: #0a4fd6; }

/* Extracto del codigo fuente del dump (ST22): mismas palabras clave en azul que SE38 y el Debugger. */
html .window--sap .sx__dtxt b { color: #0a4fd6; font-weight: 400; }