/* Estilo E · SAP R/3 retro (SAP GUI 4.6, «EnjoySAP», hacia 1999)
   Barra de título azul marino con degradado, ventanas gris azulado, controles con relieve
   (luz arriba a la izquierda y sombra abajo a la derecha), esquinas rectas, Tahoma y Courier New,
   y la barra de estado abajo con la pantalla actual. Claro = SAP GUI clásico; oscuro = versión nocturna. */
:root[data-estilo="retro"] {
  color-scheme: light;
  --fuente: Tahoma, "MS Sans Serif", Verdana, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --fondo: #D4DCE4; --superficie: #EEF2F6; --relleno: #DCE3EA;
  --marca: #0A246A; --marca-hover: #1C3F94; --marca-suave: #C9D6E8; --sobre-marca: #FFFFFF;
  --logo: linear-gradient(180deg, #3A6EA5, #0A246A);
  --texto: #000000; --etiqueta: #4A5563; --borde: #808080; --borde-suave: #B8C2CC; --hover: #C9D6E8;
  --positivo: #007A00; --critico: #C00000; --critico-suave: #F6DCDC; --positivo-suave: #DDF0DD;
  --shell: linear-gradient(90deg, #0A246A, #3A6EA5); --shell-texto: #FFFFFF; --shell-etiqueta: #D6E2F2; --shell-hover: rgba(255,255,255,.18);
  --sombra-shell: 0 1px 0 #404040;
  --buscar-fondo: #FFFFFF; --buscar-hover: #FFFFFF; --buscar-borde: #808080; --buscar-texto: #000000; --r-buscar: 0;
  --tile-hover: #F6F8FA;
  /* Relieve: borde claro arriba a la izquierda y oscuro abajo a la derecha */
  --relieve: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #808080, inset -2px -2px 0 #A9B4BF;
  --hundido: inset 1px 1px 0 #808080, inset 2px 2px 0 #A9B4BF, inset -1px -1px 0 #FFFFFF;
  --sombra-1: var(--relieve);
  --sombra-2: var(--relieve), 2px 2px 0 rgba(0,0,0,.25);
  --sombra-barra: 0 1px 0 #808080;
  --campo-borde: #808080; --campo-hover: #FFFFFF; --tabla-grupo: #DCE3EA; --tabla-hover: #C9D6E8;
  --codigo-nums: #8A96A3; --toast: #FFFFE1; --toast-texto: #000000;
  --kw: #0000C0; --str: #2E8B57; --com: #808080; --num: #3366CC;
  --r-tile: 0; --r-ctrl: 0; --r-chip: 0;
  --estado: #D4DCE4; --estado-texto: #000000;
}
:root[data-estilo="retro"][data-modo="oscuro"] {
  color-scheme: dark;
  --fondo: #17212B; --superficie: #22303D; --relleno: #2B3B4A;
  --marca: #8DB4E2; --marca-hover: #B3CDEE; --marca-suave: #2E4560; --sobre-marca: #0F1820;
  --logo: linear-gradient(180deg, #8DB4E2, #3A6EA5);
  --texto: #E8EDF2; --etiqueta: #A9B6C3; --borde: #5C6B79; --borde-suave: #34495C; --hover: #2E4560;
  --positivo: #7FD07F; --critico: #FF8A8A; --critico-suave: #4A2A2E; --positivo-suave: #23402A;
  --shell: linear-gradient(90deg, #06163F, #23466F); --shell-texto: #FFFFFF; --shell-etiqueta: #A9C1DE; --shell-hover: rgba(255,255,255,.14);
  --sombra-shell: 0 1px 0 #000000;
  --buscar-fondo: #0F1820; --buscar-hover: #0F1820; --buscar-borde: #5C6B79; --buscar-texto: #E8EDF2;
  --tile-hover: #273746;
  --relieve: inset 1px 1px 0 #3E5263, inset -1px -1px 0 #05090D, inset -2px -2px 0 #111A22;
  --hundido: inset 1px 1px 0 #05090D, inset 2px 2px 0 #111A22, inset -1px -1px 0 #3E5263;
  --sombra-barra: 0 1px 0 #000000;
  --campo-borde: #5C6B79; --campo-hover: #273746; --tabla-grupo: #1C2833; --tabla-hover: #2E4560;
  --codigo-nums: #5C6B79; --toast: #FFFFE1; --toast-texto: #000000;
  --kw: #7FA7FF; --str: #7FD0A0; --com: #8A96A3; --num: #9DC3FF;
  --estado: #1C2833; --estado-texto: #C9D4DF;
}

/* ---- Ventanas y controles con relieve ---- */
[data-estilo="retro"] body { font-size: .9375rem; padding-bottom: 1.625rem; }
[data-estilo="retro"] .shell-barra { height: 2.75rem; }
[data-estilo="retro"] .marca-texto { border-left-color: rgba(255,255,255,.35); font-weight: 700; }
[data-estilo="retro"] .buscar input { box-shadow: var(--hundido); border: 0; font-family: var(--mono); }
[data-estilo="retro"] .buscar input:focus { box-shadow: var(--hundido), 0 0 0 1px var(--marca); }
[data-estilo="retro"] .buscar input::placeholder { font-style: normal; }
[data-estilo="retro"] .espacios { background: var(--relleno); border-top: 1px solid #FFFFFF; border-bottom: 1px solid var(--borde); }
[data-estilo="retro"] .tab { height: 2.25rem; }
[data-estilo="retro"] .tab::after { display: none; }
[data-estilo="retro"] .tab.activo, [data-estilo="retro"] .tab[aria-expanded="true"] { box-shadow: var(--hundido); background: var(--superficie); }
[data-estilo="retro"] .mega, [data-estilo="retro"] .sugerencias, [data-estilo="retro"] .panel-estilo { border-radius: 0; box-shadow: var(--sombra-2); }
[data-estilo="retro"] .tile { border-radius: 0; }
[data-estilo="retro"] .tile:hover { box-shadow: var(--relieve); outline: 1px dotted var(--marca); outline-offset: -5px; }
[data-estilo="retro"] .tile:active { box-shadow: var(--hundido); }
[data-estilo="retro"] .btn-enfasis { background: var(--relleno); color: var(--texto); box-shadow: var(--relieve); font-weight: 400; }
[data-estilo="retro"] .btn-enfasis:hover { background: var(--superficie); }
[data-estilo="retro"] .btn-enfasis:active { box-shadow: var(--hundido); }
[data-estilo="retro"] .btn-trans { color: var(--texto); box-shadow: var(--relieve); background: var(--relleno); }
[data-estilo="retro"] .chip { box-shadow: var(--relieve); }
[data-estilo="retro"] .campo input, [data-estilo="retro"] .campo select { border-radius: 0; border: 0; box-shadow: var(--hundido); background: var(--buscar-fondo); }
[data-estilo="retro"] .codigo { border-radius: 0; box-shadow: var(--hundido); background: var(--buscar-fondo); }
[data-estilo="retro"] .codigo figcaption { background: var(--shell); color: #FFFFFF; font-weight: 700; border-bottom: 0; }
[data-estilo="retro"] .codigo figcaption .btn-trans { color: #000000; background: #D4DCE4; }
[data-estilo="retro"] .codigo .kw { font-weight: 400; }
[data-estilo="retro"] .codigo .com { font-style: normal; }
[data-estilo="retro"] .aviso { border-radius: 0; box-shadow: var(--relieve); }
/* En 1999 no había esquinas redondeadas */
[data-estilo="retro"] *, [data-estilo="retro"] *::before { border-radius: 0 !important; }

/* ---- Barra de estado, como la de SAP GUI: pantalla actual, sistema, mandante e INS ---- */
[data-estilo="retro"] body::after {
  content: "\25B8  " attr(data-pantalla) "        abap.es (1) 100        SAPGUI 4.6C        INS";
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: 1.5rem; line-height: 1.5rem; padding: 0 .75rem;
  font: .75rem var(--fuente); white-space: pre; overflow: hidden; text-transform: uppercase;
  background: var(--estado); color: var(--estado-texto);
  border-top: 1px solid var(--borde); box-shadow: inset 0 1px 0 #FFFFFF;
}
[data-estilo="retro"][data-modo="oscuro"] body::after { box-shadow: inset 0 1px 0 #3E5263; }
[data-estilo="retro"] .mapa-nodo rect { rx: 0; ry: 0; }