/* Diseño 2 · SAP Fiori: estructura común.
   Los colores, radios y sombras de cada estilo están en temas/*.css.
   Launchpad con barra de espacios en la cabecera, mosaicos, Object Page y List Report.
   Tipografía oficial 72 de SAP, servida desde el paquete @sap-theming. */

@font-face {
  font-family: "72";
  src: url("https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.29.0/content/Base/baseLib/baseTheme/fonts/72-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "72";
  src: url("https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.29.0/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --fuente: "72", "72full", Arial, Helvetica, sans-serif;
  --mono: "72Mono", Consolas, "Lucida Console", monospace;
  --pad: 2rem;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 7.5rem; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: .875rem;
  line-height: 1.43;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: .125rem solid var(--marca); outline-offset: .0625rem; border-radius: .25rem; }
code { font-family: var(--mono); font-size: .9em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.saltar { position: absolute; left: -999px; top: .5rem; background: var(--superficie); padding: .5rem 1rem; z-index: 99; border-radius: var(--r-ctrl); }
.saltar:focus { left: .5rem; }
.ico { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Shell bar ---------- */
.shell { position: sticky; top: 0; z-index: 30; background: var(--superficie); box-shadow: var(--sombra-shell); }
.shell-barra { background: var(--shell); color: var(--shell-texto); display: flex; align-items: center; gap: .5rem; height: 3.25rem; padding: 0 1rem 0 .75rem; }
.marca { display: flex; align-items: center; gap: .625rem; color: var(--shell-texto); margin-right: auto; }
.marca:hover { text-decoration: none; }
/* Logo de abap.es: imagen con fondo transparente, alto fijo y ancho proporcional */
.marca-logo { display: block; height: 2.25rem; width: auto; flex: none; }
/* El logo ya incluye «abap.es»: a su lado solo va el subtítulo, separado por una línea fina */
.marca-texto { font-size: .8125rem; line-height: 1.2; color: var(--shell-etiqueta); padding-left: .625rem; border-left: 1px solid var(--borde); }
.marca-texto small { display: block; font-size: .75rem; color: var(--shell-etiqueta); }
.shell-btn {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: var(--r-ctrl);
  background: transparent; color: var(--shell-texto); cursor: pointer;
}
.shell-btn:hover { background: var(--shell-hover); text-decoration: none; }
.shell-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.solo-movil { display: none; }

/* Selector de estilo y modo claro/oscuro */
.ajustes { position: relative; }
.shell-btn svg circle { fill: currentColor; stroke: none; }
.shell-btn[aria-expanded="true"] { background: var(--shell-hover); }
#btn-modo .i-sol { display: none; }
[data-modo="oscuro"] #btn-modo .i-sol { display: block; }
[data-modo="oscuro"] #btn-modo .i-luna { display: none; }
#btn-modo .i-sol circle { fill: none; stroke: currentColor; }
.panel-estilo {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
  width: 17rem; padding: .5rem;
  background: var(--superficie); color: var(--texto);
  border-radius: calc(var(--r-ctrl) + .25rem); box-shadow: var(--sombra-2);
}
.panel-tit { margin: .25rem .5rem .5rem; font-size: .75rem; color: var(--etiqueta); }
.op-estilo {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .5rem; border: 0; border-radius: var(--r-ctrl);
  background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.op-estilo:hover { background: var(--hover); }
.op-estilo[aria-checked="true"] { background: var(--marca-suave); }
.op-estilo b { display: block; font-size: .875rem; }
.op-estilo small { display: block; color: var(--etiqueta); font-size: .75rem; }
.muestra { flex: none; display: grid; grid-template-columns: 1fr 1fr; width: 2.5rem; height: 2.5rem; border-radius: .375rem; overflow: hidden; box-shadow: 0 0 0 1px var(--borde); }
.muestra i:first-child { grid-column: span 2; }

.buscar { position: relative; flex: 0 1 26rem; margin: 0 1rem; }
.buscar > svg { position: absolute; left: .75rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; fill: none; stroke: var(--buscar-texto); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.buscar input {
  width: 100%; height: 2.25rem;
  border: 1px solid var(--buscar-borde); border-radius: var(--r-buscar);
  background: var(--buscar-fondo); padding: 0 1rem 0 2.25rem;
  font: inherit; color: var(--buscar-texto);
}
.buscar input:hover { background: var(--buscar-hover); }
.buscar input:focus { outline: none; background: var(--superficie); color: var(--texto); border-color: var(--marca); box-shadow: 0 0 0 .0625rem var(--marca); }
.buscar input::placeholder { color: var(--buscar-texto); opacity: .75; font-style: italic; }
.sugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% + .375rem);
  list-style: none; margin: 0; padding: .375rem;
  background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-2);
}
.sugerencias a { display: grid; grid-template-columns: auto 1fr; gap: 0 .5rem; padding: .5rem .625rem; border-radius: var(--r-ctrl); color: var(--texto); }
.sugerencias a:hover, .sugerencias a:focus { background: var(--hover); text-decoration: none; }
.sugerencias b { font-family: var(--mono); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; }
.sugerencias small { grid-column: 2; color: var(--etiqueta); }
.sug-tipo { grid-row: span 2; align-self: center; font-size: .6875rem; color: var(--etiqueta); width: 4.75rem; }
.sug-vacio { padding: .75rem; color: var(--etiqueta); }

/* ---------- Barra de espacios (menú principal) ---------- */
.espacios { border-top: 1px solid var(--borde-suave); padding: 0 1.25rem; }
.tabs { display: flex; list-style: none; margin: 0; padding: 0; gap: .25rem; }
.tabs > li { position: relative; }
.tab {
  display: inline-flex; align-items: center; gap: .25rem;
  height: 2.75rem; padding: 0 .75rem;
  border: 0; background: none; font: inherit; color: var(--texto);
  cursor: pointer; position: relative; white-space: nowrap;
}
.tab:hover { color: var(--marca); text-decoration: none; }
.tab::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 0; height: .1875rem; border-radius: .1875rem .1875rem 0 0; background: transparent; }
.tab.activo { color: var(--marca); font-weight: 700; }
.tab.activo::after { background: var(--marca); }
.tab .flecha { width: .75rem; height: .75rem; transition: transform .15s; }
.tab[aria-expanded="true"] { color: var(--marca); }
.tab[aria-expanded="true"] .flecha { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + .25rem); left: 0;
  background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-2);
  padding: 1rem 1.25rem 1.25rem; z-index: 40;
}
.mega-in { display: grid; gap: 1.5rem; }
.mega-in.cols-1 { grid-template-columns: 17rem; }
.mega-in.cols-2 { grid-template-columns: repeat(2, 15rem); }
.mega-in.cols-3 { grid-template-columns: repeat(3, 13rem); }
.mega-in.cols-4 { grid-template-columns: repeat(4, 12rem); }
/* Título de cada columna del menú: destaca sobre los enlaces (color de marca, negrita y línea inferior) */
.mega-tit {
  margin: 0 0 .5rem; padding: 0 .5rem .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--marca); border-bottom: .125rem solid var(--marca-suave);
}
.mega ul, .mega ol, .hoja-esp ul, .hoja-esp ol { list-style: none; margin: 0; padding: 0; }
.mega a, .hoja-esp a {
  display: flex; align-items: center; gap: .5rem;
  padding: .4375rem .5rem; border-radius: var(--r-ctrl); color: var(--texto);
}
.mega a:hover, .hoja-esp a:hover { background: var(--hover); text-decoration: none; }
.mega code, .hoja-esp code { font-size: .75rem; color: var(--etiqueta); width: 2.5rem; }
.punto { width: .375rem; height: .375rem; border-radius: 50%; background: var(--marca); margin-left: auto; flex: none; }
.mega ol { counter-reset: cap; }
.mega ol[start="8"] { counter-reset: cap 7; }
.mega ol li a::before, .hoja-esp ol li a::before { counter-increment: cap; content: counter(cap); color: var(--etiqueta); font-size: .75rem; width: 1.25rem; text-align: right; flex: none; }
.hoja-esp ol { counter-reset: cap; }
.hoja-esp ol[start="8"] { counter-reset: cap 7; }

/* Hoja de menú en móvil */
.hoja-menu { position: fixed; inset: 0; z-index: 60; background: var(--superficie); overflow-y: auto; padding: 0 1rem 2rem; }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; height: 3.25rem; position: sticky; top: 0; background: var(--superficie); border-bottom: 1px solid var(--borde-suave); margin: 0 -1rem .5rem; padding: 0 .5rem 0 1rem; }
.hoja-cab p { margin: 0; font-weight: 700; font-size: 1rem; }
.hoja-link, .hoja-esp summary { display: flex; align-items: center; justify-content: space-between; padding: .875rem .5rem; font-size: 1rem; font-weight: 700; color: var(--texto); border-bottom: 1px solid var(--borde-suave); cursor: pointer; list-style: none; }
.hoja-esp summary::-webkit-details-marker { display: none; }
.hoja-esp[open] summary .flecha { transform: rotate(180deg); }
.hoja-esp .mega-col { padding: .5rem 0 .75rem; }
.hoja-esp a { padding: .625rem .5rem; font-size: .9375rem; }

/* ---------- Página de inicio (launchpad) ---------- */
.pagina { max-width: 82rem; margin: 0 auto; padding: 0 var(--pad) 4rem; }
.bienvenida { padding: 2.5rem 0 .5rem; }
.bienvenida h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
.bienvenida p { margin: 0; max-width: 60ch; color: var(--etiqueta); font-size: 1rem; }
.seccion { margin-top: 2.25rem; }
.seccion h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; }

.tiles { display: flex; flex-wrap: wrap; gap: 1rem; }
.tile {
  position: relative;
  width: 11rem; height: 11rem;
  display: flex; flex-direction: column;
  padding: 1rem;
  background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1);
  color: var(--texto);
  transition: box-shadow .15s, background-color .15s;
}
.tile:hover { text-decoration: none; background: var(--tile-hover); box-shadow: var(--sombra-2); }
.tile:active { background: var(--relleno); }
.tile-cab b { display: block; font-size: 1rem; line-height: 1.25; }
.tile-cab small { display: block; margin-top: .25rem; color: var(--etiqueta); font-size: .875rem; line-height: 1.3; }
.tile-pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.tile-ico { width: 2rem; height: 2rem; color: var(--marca); stroke-width: 1.5; }
.kpi { font-size: 2.25rem; line-height: 1; font-weight: 400; color: var(--texto); margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.kpi small { display: block; font-size: .75rem; color: var(--etiqueta); margin-top: .25rem; }
.tile-nota { font-size: .75rem; color: var(--etiqueta); text-align: right; line-height: 1.3; }
.kpi small + small { margin-top: .125rem; }

.capitulos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.cap {
  display: flex; align-items: center; gap: .75rem;
  min-height: 3.5rem; padding: .5rem 1rem .5rem .5rem;
  background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1);
  color: var(--texto);
}
.cap:hover { text-decoration: none; box-shadow: var(--sombra-2); }
.cap-n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-ctrl); background: var(--relleno); color: var(--etiqueta); font-weight: 700; flex: none; }
.cap.demo .cap-n { background: var(--marca); color: var(--sobre-marca); }

/* ---------- Object Page (manual) ---------- */
.op-in { max-width: 70rem; margin: 0 auto; padding: 0 var(--pad); }
.op-cab { background: var(--superficie); padding: 1.25rem 0 1.25rem; }
.migas { font-size: .875rem; color: var(--etiqueta); margin-bottom: .5rem; }
.migas span { margin: 0 .375rem; color: var(--borde); }
.op-cab h1, .lr-cab h1 { font-size: 1.5rem; line-height: 1.25; margin: 0; font-weight: 700; }
.op-sub { margin: .375rem 0 0; color: var(--etiqueta); max-width: 70ch; }
.atributos { display: flex; flex-wrap: wrap; gap: .75rem 3rem; margin: 1.25rem 0 0; }
.atributos dt { font-size: .875rem; color: var(--etiqueta); }
.atributos dd { margin: .125rem 0 0; font-size: 1rem; }
.atributos div:first-child dd { font-size: 1.25rem; font-weight: 700; }

.anclas { position: sticky; top: 6.1rem; z-index: 20; background: var(--superficie); box-shadow: inset 0 -1px 0 var(--borde-suave), var(--sombra-barra); }
.anclas .op-in { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.anclas a { position: relative; flex: none; padding: .8125rem .75rem; color: var(--texto); font-size: .875rem; white-space: nowrap; }
.anclas a:hover { color: var(--marca); text-decoration: none; }
.anclas a.activo { color: var(--marca); font-weight: 700; }
.anclas a.activo::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 0; height: .1875rem; border-radius: .1875rem .1875rem 0 0; background: var(--marca); }

.op-cuerpo { padding-top: .5rem; padding-bottom: 5rem; }
.op-sec { padding: 2rem 0 .5rem; border-bottom: 1px solid var(--borde-suave); scroll-margin-top: 9.5rem; }
.op-sec:last-child { border-bottom: 0; }
.op-sec h2 { display: flex; align-items: baseline; gap: .625rem; font-size: 1.25rem; margin: 0 0 1rem; }
.op-sec h2 span { font-size: .875rem; color: var(--etiqueta); font-weight: 400; }
.op-sec p, .op-sec .lista { max-width: 72ch; font-size: .9375rem; line-height: 1.6; }
.lista { padding-left: 1.25rem; }
.lista li { margin: .375rem 0; }
.op-sec p code, .lista code { background: var(--relleno); padding: .0625rem .3125rem; border-radius: .25rem; }

/* Process flow */
.proceso { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 0; padding: 0; margin: 1.25rem 0; }
.proceso li { display: flex; align-items: center; }
.proceso li + li::before { content: ""; width: 1.5rem; height: .125rem; background: var(--borde); }
.proceso span { padding: .625rem .875rem; border-radius: .75rem; background: var(--superficie); box-shadow: var(--sombra-1); border-left: .25rem solid var(--marca); font-size: .875rem; }
.proceso li:first-child span { border-left-color: var(--positivo); }

.ops { display: grid; gap: .75rem; margin: 1rem 0; }
.op-fila { background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1); padding: .875rem 1rem; }
.op-tipo { margin: 0 0 .5rem !important; font-weight: 700; font-size: .875rem !important; }
.op-vals { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 !important; max-width: none !important; }
.op-vals span { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem .1875rem .25rem; border-radius: var(--r-chip); background: var(--relleno); font-size: .8125rem; color: var(--etiqueta); }
.op-vals code { background: var(--superficie); color: var(--texto); border-radius: .75rem; padding: .0625rem .5rem; font-weight: 700; }

.evento { margin: 1.25rem 0; padding: 0 0 0 1rem; border-left: .1875rem solid var(--marca-suave); }
.evento h3 { margin: 0 0 .25rem; font-size: .9375rem; color: var(--marca); }

.codigo { margin: 1rem 0; background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1); overflow: hidden; max-width: 46rem; }
.codigo figcaption { display: flex; align-items: center; justify-content: space-between; padding: .375rem .5rem .375rem 1rem; font-size: .75rem; color: var(--etiqueta); border-bottom: 1px solid var(--borde-suave); }
.btn-trans { display: inline-flex; align-items: center; gap: .375rem; border: 0; background: none; color: var(--marca); font: inherit; font-size: .8125rem; padding: .375rem .625rem; border-radius: var(--r-ctrl); cursor: pointer; }
.btn-trans:hover { background: var(--hover); }
.codigo pre { display: flex; margin: 0; padding: .875rem 0; overflow-x: auto; font: .8125rem/1.6 var(--mono); }
.codigo .nums { color: var(--codigo-nums); text-align: right; padding: 0 .875rem 0 1rem; user-select: none; white-space: pre; }
.codigo code { font-size: 1em; padding-right: 1rem; }
.kw { color: var(--kw); font-weight: 700; } .str { color: var(--str); } .com { color: var(--com); font-style: italic; } .num { color: var(--num); }

/* ---------- Novedades: comparación antes / ahora ---------- */
.segmentado { display: inline-flex; margin-top: 1.25rem; padding: .125rem; border-radius: calc(var(--r-ctrl) + .125rem); background: var(--relleno); }
.segmentado button {
  height: 2rem; padding: 0 .875rem; border: 0; border-radius: var(--r-ctrl);
  background: none; color: var(--texto); font: inherit; cursor: pointer;
}
.segmentado button:hover { background: var(--hover); }
.segmentado button[aria-pressed="true"] { background: var(--superficie); color: var(--marca); font-weight: 700; box-shadow: var(--sombra-1); }

.comp { margin: 1.5rem 0 2rem; }
.comp[hidden], .op-sec[hidden], .anclas a[hidden] { display: none; }
.comp-cab { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.comp-cab h3 { margin: 0; font-size: 1rem; }
.chip-ver { font-size: .75rem; padding: .0625rem .5rem; border-radius: var(--r-chip); background: var(--relleno); color: var(--etiqueta); white-space: nowrap; }
.chip-ver.nueva { background: var(--marca-suave); color: var(--marca); font-weight: 700; }
.op-sec .comp-desc { margin: .375rem 0 .75rem; color: var(--etiqueta); }
.comp-codigo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.comp-codigo .codigo { margin: 0; max-width: none; }
.codigo.antes figcaption, .codigo.ahora figcaption { font-weight: 700; }
.codigo.antes figcaption::before, .codigo.ahora figcaption::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .5rem; }
.codigo.antes figcaption::before { background: var(--critico); }
.codigo.ahora figcaption::before { background: var(--positivo); }
.codigo.antes figcaption { color: var(--critico); justify-content: flex-start; }
.codigo.ahora figcaption { color: var(--positivo); justify-content: flex-start; }
.codigo.antes .btn-trans, .codigo.ahora .btn-trans { margin-left: auto; }
.codigo.ahora { box-shadow: var(--sombra-1), inset .1875rem 0 0 var(--positivo); }
.fuentes { color: var(--etiqueta); }

/* ---------- Bloques de los temas ---------- */
.pasos-lista { counter-reset: paso; list-style: none; padding: 0; margin: 1rem 0; max-width: 72ch; }
.pasos-lista li { counter-increment: paso; position: relative; padding: .375rem 0 .875rem 2.75rem; font-size: .9375rem; line-height: 1.6; }
.pasos-lista li::before {
  content: counter(paso); position: absolute; left: 0; top: .25rem;
  display: grid; place-items: center; width: 1.875rem; height: 1.875rem;
  border-radius: 50%; background: var(--marca-suave); color: var(--marca); font-weight: 700; font-size: .875rem;
}
.pasos-lista li:not(:last-child)::after { content: ""; position: absolute; left: .9rem; top: 2.25rem; bottom: 0; width: 1px; background: var(--borde); }
.pasos-lista code, .aviso code, .tabla-simple code { background: var(--relleno); padding: .0625rem .3125rem; border-radius: .25rem; }

.tabla-simple { margin: 1rem 0; overflow-x: auto; background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1); }
.tabla-simple table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla-simple th, .tabla-simple td { text-align: left; vertical-align: top; padding: .625rem 1rem; border-bottom: 1px solid var(--borde-suave); }
.tabla-simple thead th { color: var(--etiqueta); font-weight: 400; background: var(--tabla-grupo); }
.tabla-simple tbody th { font-weight: 700; white-space: nowrap; }
.tabla-simple tbody tr:last-child > * { border-bottom: 0; }

.aviso { display: flex; gap: .625rem; align-items: flex-start; margin: 1rem 0; padding: .75rem 1rem; max-width: 72ch; background: var(--marca-suave); border-radius: var(--r-ctrl); font-size: .875rem !important; line-height: 1.5 !important; }
.aviso .ico { color: var(--marca); margin-top: .125rem; }

/* Menú: subtítulos dentro de una columna */
.mega-sub { padding: .75rem .5rem .25rem; font-size: .8125rem; font-weight: 700; color: var(--texto); }
.mega-sub:first-child { padding-top: 0; }
.hoja-esp .mega-sub { padding-left: .5rem; }

/* Inicio: últimas noticias */
.seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.noticias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.noticia { display: block; height: 100%; padding: 1rem; background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1); color: var(--texto); }
.noticia:hover { text-decoration: none; box-shadow: var(--sombra-2); }
.noticia-meta { display: block; font-size: .75rem; color: var(--etiqueta); margin-bottom: .375rem; }
.noticia b { font-size: .9375rem; line-height: 1.35; }

/* Blog */
.filtro-blog { flex-wrap: wrap; }
.posts { list-style: none; margin: 1.5rem 0 4rem; padding: 0; display: grid; gap: 1rem; max-width: 52rem; }
.post { padding: 1.25rem 1.5rem; background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1); }
.post[hidden] { display: none; }
.post-meta { display: flex; align-items: center; gap: .75rem; margin: 0 0 .5rem; font-size: .8125rem; color: var(--etiqueta); }
.post h2 { margin: 0 0 .375rem; font-size: 1.125rem; line-height: 1.3; }
.post p { margin: 0; max-width: 70ch; line-height: 1.55; }
.post .post-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; font-size: .875rem; }
.post-links a { display: inline-flex; align-items: center; gap: .375rem; }

/* Anuncios: discretos, con etiqueta y reserva de alto para que la página no salte al cargar */
.anuncio { margin: 2rem 0; padding-top: .5rem; max-width: 46rem; border-top: 1px solid var(--borde-suave); }
.anuncio-et { display: block; margin-bottom: .375rem; font-size: .6875rem; color: var(--etiqueta); }
.anuncio ins.adsbygoogle { min-height: 90px; }
.anuncio-demo { display: grid; place-items: center; min-height: 90px; border: 1px dashed var(--borde); border-radius: var(--r-ctrl); color: var(--etiqueta); font-size: .75rem; }
.post-anuncio { list-style: none; }
.post-anuncio .anuncio { margin: .5rem 0; }
@media print { .anuncio, .post-anuncio { display: none; } }

/* Páginas convertidas de la web antigua */
.antigua .op-sec.intro { padding-top: 1.5rem; }
.antigua .op-sec.sub { border-bottom: 0; padding-top: 1rem; }
.antigua .op-sec h3 { font-size: 1.0625rem; margin: 0 0 .75rem; }
.antigua p, .antigua li { max-width: 72ch; font-size: .9375rem; line-height: 1.6; }
.antigua ul, .antigua ol { padding-left: 1.375rem; }
.antigua li { margin: .25rem 0; }
.antigua li > p { margin: .25rem 0; }
.antigua p code, .antigua li code, .antigua td code { background: var(--relleno); padding: .0625rem .3125rem; border-radius: .25rem; font-size: .85em; }
.antigua figure { margin: 1.25rem 0; }
.antigua img { max-width: 100%; height: auto; border-radius: var(--r-ctrl); box-shadow: 0 0 0 1px var(--borde-suave); background: #fff; }
.antigua .tabla-simple td, .antigua .tabla-simple th { font-size: .875rem; }
.antigua .codigo { max-width: 52rem; }
.cargando { color: var(--etiqueta); padding: 2rem 0; }
.pasar { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 3rem; padding-top: 1.5rem; border-top: 1px solid var(--borde-suave); }
.pasar a { display: flex; flex-direction: column; max-width: 45%; font-weight: 700; }
.pasar a.sig { text-align: right; margin-left: auto; }
.pasar small { font-weight: 400; color: var(--etiqueta); font-size: .75rem; }

/* Descargas */
.descargas { padding-bottom: 3rem; }
.grupo-desc { margin-top: 2rem; }
.grupo-desc[hidden], .grupo-desc li[hidden] { display: none; }
.grupo-desc h2 { font-size: 1.125rem; margin: 0 0 .75rem; }
.grupo-desc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .5rem; }
.desc { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .625rem .875rem .625rem .625rem; background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1); color: var(--texto); }
.desc:hover { text-decoration: none; box-shadow: var(--sombra-2); }
.desc-tipo { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-ctrl); background: var(--critico-suave); color: var(--critico); font-size: .6875rem; font-weight: 700; }
.desc-txt { flex: 1; min-width: 0; }
.desc-txt b { display: block; font-size: .875rem; line-height: 1.3; }
.desc-txt small { color: var(--etiqueta); font-size: .75rem; }
.desc .ico { color: var(--marca); }

/* Listas de referencia */
.tabla .nota-ref { display: flex; gap: .375rem; align-items: flex-start; margin-top: .375rem; font-size: .8125rem; color: var(--critico); }
.tabla .nota-ref .ico { margin-top: .1rem; flex: none; }
.tabla.sin-desc td:first-child { width: auto; white-space: normal; }
.tabla tr.grupo .nota-grupo { display: block; margin-top: .125rem; font-weight: 400; font-size: .75rem; color: var(--etiqueta); }

/* Pie de página */
.pie { margin-top: 3rem; background: var(--superficie); box-shadow: inset 0 1px 0 var(--borde-suave); }
.pie-in { max-width: 82rem; margin: 0 auto; padding: 1.5rem var(--pad) 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.pie-marca { margin: 0; color: var(--etiqueta); font-size: .875rem; }
.pie-marca b { color: var(--texto); margin-right: .5rem; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; }
.pie-boton { border: 0; padding: 0; background: none; color: var(--marca); font: inherit; cursor: pointer; }
.pie-boton:hover { text-decoration: underline; }
mark.pendiente { background: var(--critico-suave); color: var(--critico); padding: 0 .25rem; border-radius: .25rem; }
@media print { .pie { display: none; } }

/* ---------- List Report ---------- */
.lr-in { max-width: 70rem; margin: 0 auto; padding: 0 var(--pad); }
.lr-cab { background: var(--superficie); padding: 1.25rem 0 1.5rem; box-shadow: inset 0 -1px 0 var(--borde-suave); }
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.campo { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; color: var(--etiqueta); }
.campo input, .campo select {
  height: 2.25rem; min-width: 15rem;
  border: 1px solid var(--campo-borde); border-radius: var(--r-ctrl);
  padding: 0 .625rem; font: inherit; color: var(--texto); background: var(--superficie);
  box-shadow: inset 0 -1px 0 var(--campo-borde);
}
.campo input:hover, .campo select:hover { background: var(--campo-hover); }
.campo input:focus, .campo select:focus { outline: .125rem solid var(--marca); outline-offset: .0625rem; }

.tarjeta-tabla { margin: 1.5rem 0 4rem; background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1); overflow: hidden; }
.tabla-barra { padding: .875rem 1rem; border-bottom: 1px solid var(--borde-suave); }
.tabla-barra h2 { margin: 0; font-size: 1rem; }
.tabla-barra span { color: var(--etiqueta); font-weight: 400; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: .625rem 1rem; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
.tabla thead th { font-weight: 400; color: var(--etiqueta); background: var(--superficie); position: sticky; top: 6.1rem; }
.tabla tr.grupo th { background: var(--tabla-grupo); font-weight: 700; font-size: .8125rem; padding: .5rem 1rem; }
.tabla td:first-child { white-space: nowrap; width: 1%; }
.tabla td code { font-size: .8125rem; color: var(--texto); }
.tabla tr.fila:hover td { background: var(--tabla-hover); }
.tabla tr.navegable { cursor: pointer; }
.tabla td.nav, .tabla th.nav { width: 2.5rem; color: var(--etiqueta); padding-left: 0; }
.tabla td.nav .ico { margin-top: .125rem; }
.vacio { padding: 2rem 1rem; text-align: center; color: var(--etiqueta); margin: 0; }

/* ---------- Mensaje ilustrado ---------- */
.mensaje-ilus { max-width: 30rem; margin: 4rem auto; text-align: center; }
.ilus { width: 10rem; height: 7.5rem; }
.i-papel { fill: var(--superficie); stroke: var(--borde); stroke-width: 2; }
.i-linea { fill: var(--relleno); }
.i-sello { fill: var(--marca); }
.i-flecha { fill: none; stroke: var(--sobre-marca); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mensaje-ilus h1 { font-size: 1.5rem; margin: 1.25rem 0 .5rem; }
.mensaje-ilus p { color: var(--etiqueta); margin: 0 0 1.5rem; }
.btn-enfasis { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 1rem; border-radius: var(--r-ctrl); background: var(--marca); color: var(--sobre-marca); font-weight: 700; }
.btn-enfasis:hover { background: var(--marca-hover); text-decoration: none; }

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%);
  background: var(--toast); color: var(--toast-texto); padding: .75rem 1.25rem; border-radius: .75rem;
  box-shadow: var(--sombra-2); z-index: 80; animation: toast 2.4s ease both;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, .5rem); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  :root { --pad: 1.5rem; }
  .espacios { display: none; }
  .solo-movil { display: inline-grid; }
  html { scroll-padding-top: 3.5rem; }
  .anclas, .tabla thead th { top: 3.25rem; }
  .op-sec { scroll-margin-top: 6.5rem; }
}
@media (max-width: 900px) {
  .comp-codigo { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}
/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  :root { --pad: 1rem; }
  .shell-barra { padding: 0 .5rem; gap: .25rem; }
  .marca-texto small { display: none; }
  .marca-logo { height: 1.75rem; }
  .marca-texto { display: none; }
  .buscar { margin: 0 .25rem; flex: 1 1 auto; min-width: 0; }
  .buscar input::placeholder { font-size: .8125rem; }
  .shell-barra > a.shell-btn { display: none; }
  .bienvenida { padding-top: 1.75rem; }
  .bienvenida h1 { font-size: 1.5rem; }
  .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .tile { width: auto; height: 9.5rem; padding: .875rem; }
  .tile-cab small { font-size: .8125rem; }
  .kpi { font-size: 1.75rem; }
  .campo, .campo input, .campo select { width: 100%; min-width: 0; }
  .filtros { flex-direction: column; gap: .75rem; }
  .tabla thead { display: none; }
  .tabla tr.fila { display: grid; grid-template-columns: 1fr auto; }
  .tabla tr.fila td { border: 0; padding: .125rem 1rem; }
  .tabla tr.fila td:first-child { padding-top: .75rem; width: auto; }
  .tabla tr.fila td:nth-child(2) { grid-column: 1; padding-bottom: .75rem; color: var(--etiqueta); border-bottom: 1px solid var(--borde-suave); }
  .tabla tr.fila td.nav { grid-column: 2; grid-row: 1 / span 2; align-self: center; border-bottom: 1px solid var(--borde-suave); height: 100%; display: flex; align-items: center; }
  .tabla tr.fila[hidden] { display: none; }
  .atributos { gap: .75rem 1.5rem; }
  .comp-codigo { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .segmentado { display: flex; }
  .segmentado button { flex: 1; padding: 0 .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: .01ms !important; }
}

/* ---------- Diagramas e ilustraciones (comun/diagramas.js) ---------- */
.figura { margin: 1.5rem 0; max-width: 46rem; }
.figura .dg { display: block; width: 100%; height: auto; background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); padding: .5rem; box-sizing: border-box; }
.figura figcaption { margin-top: .625rem; font-size: .8125rem; line-height: 1.5; color: var(--etiqueta); max-width: 72ch; }
.dg text { font-family: inherit; font-size: 14px; fill: var(--texto); }
.dg .dg-b { font-weight: 700; }
.dg .dg-s { font-size: 12px; fill: var(--etiqueta); }
.dg .dg-h { font-size: 20px; font-weight: 700; }
.dg .dg-peq { font-size: 13px; }
.dg .dg-kpi { font-size: 34px; font-weight: 300; }
.dg .dg-letra { font-size: 26px; font-weight: 700; fill: var(--texto); }
.dg .dg-ver { fill: var(--marca); }
.dg .dg-fuerte { font-weight: 700; fill: var(--texto); }
.dg .dg-tenue { fill: var(--codigo-nums); }
.dg .dg-cod { font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; }
.dg .dg-enlace { fill: var(--marca); }
.dg .dg-tm, .dg .dg-tm tspan { fill: var(--sobre-marca); }
.dg .dg-verde { fill: var(--positivo); }
.dg .dg-rojo { fill: var(--critico); }
.dg .dg-ambar { fill: #C35500; }
.dg .dg-kw { fill: var(--kw); }
.dg .dg-com { fill: var(--com); }
.dg .dg-c { fill: var(--superficie); stroke: var(--borde); }
.dg .dg-r { fill: var(--relleno); }
.dg .dg-b-r { fill: var(--etiqueta); }
.dg .dg-m { fill: var(--marca); }
.dg .dg-ms { fill: var(--marca-suave); stroke: var(--marca); stroke-width: 1; }
.dg .dg-ok { fill: var(--positivo-suave); stroke: var(--positivo); }
.dg .dg-ko { fill: var(--critico-suave); stroke: var(--critico); }
.dg .dg-av { fill: rgba(233, 115, 12, .14); stroke: #E9730C; }
.dg .dg-zona { fill: var(--relleno); stroke: var(--borde); stroke-dasharray: 6 4; }
.dg .dg-zona2 { fill: var(--marca-suave); }
.dg .dg-zona-t { fill: var(--etiqueta); }
.dg .dg-campo { fill: var(--superficie); stroke: var(--campo-borde); }
.dg .dg-ventana { stroke: var(--borde); }
.dg .dg-mosaico { stroke: var(--borde-suave); }
.dg .dg-l { stroke: var(--etiqueta); stroke-width: 1.5; fill: none; }
.dg .dg-fina { stroke: var(--borde-suave); stroke-width: 1; }
.dg .dg-gruesa { stroke-width: 3; }
.dg .dg-disc { stroke-dasharray: 5 4; }
.dg .dg-l-ko { stroke: var(--critico); }
.dg .dg-l-ok { stroke: var(--positivo); }
.dg .dg-pf { fill: var(--etiqueta); }
:root[data-modo="oscuro"] .dg .dg-ambar { fill: #FFB25C; }
/* En el móvil el diagrama mantiene un ancho legible y se desplaza en horizontal */
@media (max-width: 40rem) {
  .figura { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
  .figura .dg { min-width: 34rem; padding: .25rem; border-radius: .75rem; }
  .figura figcaption { position: sticky; left: 0; max-width: calc(100vw - 2rem); }
}
.dg .dg-chip { font-size: 11px; }
.dg .dg-msf { fill: var(--marca-suave); }
/* Nombres largos de clases o funciones en el texto: que partan línea en pantallas estrechas */
.op-sec p code, .lista code, .aviso code, .pasos-lista code, .antigua li code { overflow-wrap: anywhere; }
/* Notas de revisión de las páginas antiguas: texto sin icono, en bloque (con flex cada <b> o <code> era una columna) */
.aviso.nota-rev { display: block; }

/* ---------- Fichas de referencia (funciones/<slug>) ---------- */
.ficha-titulo code { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; word-break: break-word; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; padding: .125rem .625rem; border-radius: var(--r-chip); background: var(--relleno); color: var(--etiqueta); font-weight: 700; white-space: nowrap; }
a.chip:hover { text-decoration: none; background: var(--hover); }
.chip.azul { background: var(--marca-suave); color: var(--marca); }
.chip.ok { background: var(--positivo-suave); color: var(--positivo); }
.chip.ko { background: var(--critico-suave); color: var(--critico); }
.aviso.aviso-ko { background: var(--critico-suave); }
.aviso.aviso-ko .ico { color: var(--critico); }
.ficha .op-sec h3 { font-size: 1rem; margin: 1.5rem 0 .25rem; }
.ficha-nota { color: var(--etiqueta); font-size: .8125rem !important; margin: 0 0 .5rem; }
.ficha-params { max-width: 52rem; }
.ficha-params th[scope="row"] { white-space: nowrap; vertical-align: top; }
.ficha-params th[scope="row"] .chip { margin-left: .375rem; font-size: .6875rem; padding: 0 .375rem; }
.ficha-params td code, .ficha-params th code { font-size: .8125rem; }
.ficha-defecto { display: block; margin-top: .25rem; font-size: .75rem; color: var(--etiqueta); }
.ficha-enlaces { display: flex; flex-wrap: wrap; gap: .5rem; }
.ficha-enlaces a, .ficha-enlaces > code { display: inline-flex; padding: .25rem .625rem; border-radius: var(--r-ctrl); background: var(--superficie); box-shadow: var(--sombra-1); font-size: .8125rem; }
.ficha-enlaces a:hover { text-decoration: none; background: var(--hover); }
.ficha-enlaces > code { color: var(--etiqueta); box-shadow: none; background: var(--relleno); }
.ficha-foro { background: var(--marca-suave); border-radius: var(--r-tile); padding: 1.25rem 1.5rem !important; margin-top: 2rem; border: 0 !important; }
.ficha-foro h2 { margin-top: 0; }
.ficha-fecha { color: var(--etiqueta); font-size: .8125rem; margin: 1.5rem 0 0; }
.ficha-caso { background: var(--superficie); box-shadow: var(--sombra-1); border-left: 3px solid var(--marca); border-radius: var(--r-ctrl); padding: .25rem 1.25rem .75rem; margin-top: 1rem; max-width: 52rem; }
.ficha-caso h3 { margin-top: .75rem !important; }
.ficha-pasos li { margin-bottom: .5rem; }
@media (max-width: 40rem) {
  .ficha-titulo code { font-size: 1.125rem; }
  .ficha-params th[scope="row"] { white-space: normal; }
  .ficha-params table, .ficha-params thead, .ficha-params tbody, .ficha-params tr, .ficha-params th, .ficha-params td { display: block; }
  .ficha-params thead { display: none; }
  .ficha-params tr { padding: .5rem 0; border-bottom: 1px solid var(--borde-suave); }
  .ficha-params td, .ficha-params th { border: 0 !important; padding: .125rem .75rem !important; }
}

/* ---------- Manual: «Antes y ahora», estado de cada apartado, caja «Así se hace hoy» y texto original plegado ---------- */
.antes-ahora .tabla-simple td code, .antes-ahora .tabla-simple th code { font-size: .8125rem; white-space: normal; overflow: visible; text-overflow: clip; }
.antes-ahora .tabla-simple td:last-child { white-space: nowrap; }
.antes-ahora .igual { color: var(--etiqueta); font-size: .875rem; }
.estado-linea { margin: -.25rem 0 .75rem !important; }
.hoy-caja { background: var(--superficie); box-shadow: var(--sombra-1); border-left: .1875rem solid var(--marca); border-radius: var(--r-ctrl); padding: .25rem 1.25rem 1rem; margin: 0 0 1.25rem; }
.hoy-caja .hoy-tit { font-weight: 700; color: var(--marca); margin: .75rem 0 .5rem; }
.hoy-caja .comp-codigo { margin: .75rem 0; }
details.clasico { border: 1px solid var(--borde-suave); border-radius: var(--r-ctrl); padding: 0 1rem; margin: 0 0 1rem; }
details.clasico > summary { cursor: pointer; padding: .75rem 0; font-weight: 700; color: var(--etiqueta); list-style-position: inside; }
details.clasico > summary:hover { color: var(--marca); }
details.clasico[open] > summary { border-bottom: 1px solid var(--borde-suave); margin-bottom: .75rem; }
@media (max-width: 40rem) {
  .antes-ahora .tabla-simple table, .antes-ahora .tabla-simple thead, .antes-ahora .tabla-simple tbody, .antes-ahora .tabla-simple tr, .antes-ahora .tabla-simple th, .antes-ahora .tabla-simple td { display: block; }
  .antes-ahora .tabla-simple thead { display: none; }
  .antes-ahora .tabla-simple tr { padding: .5rem 0; border-bottom: 1px solid var(--borde-suave); }
  .antes-ahora .tabla-simple td, .antes-ahora .tabla-simple th { border: 0 !important; padding: .125rem .75rem !important; }
  .antes-ahora .tabla-simple td:nth-child(2)::before { content: 'En el manual: '; color: var(--etiqueta); }
  .antes-ahora .tabla-simple td:nth-child(3)::before { content: 'Hoy: '; color: var(--etiqueta); }
  .hoy-caja { padding: .25rem .875rem .75rem; }
}

/* ---------- Mapa de tablas y generador de JOIN ---------- */
.mapa-recetas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.mapa-recetas > span { color: var(--etiqueta); font-size: .875rem; }
.mapa-recetas .chip { border: 0; cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 600; }
.mapa-recetas .chip:hover { background: var(--hover); }
.mapa-cuerpo { padding: 1.5rem 0 2rem; }
.mapa-cadena { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.mapa-cadena .mapa-tabla { font-size: .9375rem; padding: .25rem .875rem; }
.mapa-cadena .mapa-tabla a { color: inherit; }
.mapa-flecha { font-family: var(--mono); font-size: .75rem; color: var(--etiqueta); }
.mapa-flecha::before { content: '⟶ '; color: var(--marca); }
.mapa-cadena #mapa-quitar { margin-left: auto; }
.mapa-rejilla { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.mapa-panel { background: var(--superficie); box-shadow: var(--sombra-1); border-radius: var(--r-tile); padding: 1rem 1.25rem; }
.mapa-panel h2 { font-size: 1rem; margin: 0 0 .75rem; }
.mapa-grafo { width: 100%; height: auto; display: block; }
.mapa-linea { stroke: var(--borde); stroke-width: 1.5; }
.mapa-nodo rect { fill: var(--relleno); stroke: var(--marca); stroke-width: 1.25; }
.mapa-nodo text { fill: var(--texto); font: 700 13px var(--mono); text-anchor: middle; }
.mapa-nodo[data-tabla] { cursor: pointer; }
.mapa-nodo[data-tabla]:hover rect, .mapa-nodo[data-tabla]:focus rect { fill: var(--marca-suave); stroke-width: 2.5; }
.mapa-nodo[data-tabla]:focus { outline: none; }
.mapa-nodo.sin-ficha rect { stroke-dasharray: 4 3; stroke: var(--etiqueta); }
.mapa-nodo.centro rect { fill: var(--marca); stroke: var(--marca); }
.mapa-nodo.centro text { fill: #fff; font-size: 15px; }
.mapa-campos { border: 0; padding: 0; margin: 0 0 1rem; max-height: 16rem; overflow: auto; }
.mapa-campos legend { font-weight: 700; margin-bottom: .375rem; }
.mapa-campos legend small { font-weight: 400; color: var(--etiqueta); }
.mapa-campos label { display: block; font-size: .8125rem; padding: .125rem 0; cursor: pointer; }
.mapa-campos label small { color: var(--etiqueta); }
.mapa-sql { margin-top: 1.25rem; }
.mapa-opciones { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: .75rem; }
.mapa-opciones h2 { margin: 0 auto 0 0 !important; align-self: center; }
.mapa-sql .codigo { max-width: none; }
@media (max-width: 56rem) {
  .mapa-rejilla { grid-template-columns: minmax(0, 1fr); }
  .mapa-cadena #mapa-quitar { margin-left: 0; }
}

/* ---------- Diccionario de dumps ---------- */
.dumps-lista { display: grid; gap: 1rem; padding: 1.5rem 0 2rem; }
.dump { background: var(--superficie); box-shadow: var(--sombra-1); border-radius: var(--r-tile); padding: 1rem 1.25rem; scroll-margin-top: 7rem; }
.dump h2 { margin: 0; font-size: 1.125rem; }
.dump h2 code { font-family: var(--mono); color: var(--critico); word-break: break-word; }
.dump-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin: .5rem 0; }
.dump-chips .chip { white-space: normal; }
.dump-que { font-size: 1rem; margin: .5rem 0; }
.dump-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.dump h3 { font-size: .875rem; margin: .5rem 0 .25rem; color: var(--etiqueta); }
.dump .comp-codigo { margin-top: .75rem; }
.dump-enlace { margin: .5rem 0 0; font-size: .8125rem; }
.dump-destacado { outline: 2px solid var(--marca); }
@media (max-width: 48rem) { .dump-cols { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Etiqueta «NEW» delante de los enlaces nuevos del menú */
.nuevo { flex: none; font-size: .5625rem; font-weight: 800; letter-spacing: .05em; line-height: 1; padding: .1875rem .3125rem; border-radius: var(--r-chip); background: var(--marca); color: #fff; }

/* ---------- Portada: «Hoy en abap.es» ---------- */
.del-dia-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.del-dia { display: flex; flex-direction: column; gap: .375rem; padding: 1rem 1.25rem; background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); color: var(--texto); border-top: .1875rem solid var(--marca); }
.del-dia:hover { text-decoration: none; background: var(--tile-hover); box-shadow: var(--sombra-2); }
.del-dia-tipo { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--marca); }
.del-dia code { font-family: var(--mono); font-size: 1.375rem; font-weight: 700; word-break: break-word; }
.del-dia-desc { color: var(--etiqueta); font-size: .875rem; line-height: 1.35; }
.del-dia-ver { margin-top: auto; display: inline-flex; align-items: center; gap: .25rem; color: var(--marca); font-size: .8125rem; font-weight: 700; padding-top: .25rem; }
.del-dia-ver .ico { width: .875rem; height: .875rem; }

/* Descargas: chuleta de ABAP moderno destacada */
.chuleta { display: grid; grid-template-columns: 1fr auto; gap: .375rem 1rem; align-items: center; margin: 1.5rem 0 .5rem; padding: 1rem 1.25rem; background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); border-left: .25rem solid var(--marca); color: var(--texto); }
.chuleta:hover { text-decoration: none; box-shadow: var(--sombra-2); }
.chuleta .chip { justify-self: start; }
.chuleta b { font-size: 1.125rem; grid-column: 1; }
.chuleta span:not(.chip) { grid-column: 1; color: var(--etiqueta); font-size: .875rem; }
.chuleta .ico { grid-column: 2; grid-row: 1 / span 3; width: 2rem; height: 2rem; color: var(--marca); }

/* ---------- Test de ABAP ---------- */
.test-cuerpo { padding: 1.5rem 0 2rem; scroll-margin-top: 7rem; }
.test-niveles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.test-nivel { display: flex; flex-direction: column; gap: .5rem; text-align: left; padding: 1.25rem; border: 0; cursor: pointer; font: inherit; color: var(--texto);
  background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); border-top: .25rem solid var(--marca); }
.test-nivel:hover { box-shadow: var(--sombra-2); background: var(--tile-hover); }
.test-nivel b { font-size: 1.25rem; }
.test-nivel span { color: var(--etiqueta); font-size: .9375rem; }
.test-nivel small { margin-top: auto; color: var(--marca); font-weight: 700; }
.test-tarjeta { max-width: 46rem; background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); padding: 1.25rem 1.5rem; }
.test-progreso { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--etiqueta); }
.test-barra { height: .375rem; background: var(--relleno); border-radius: .375rem; margin: .5rem 0 1rem; overflow: hidden; }
.test-barra i { display: block; height: 100%; background: var(--marca); transition: width .3s; }
.test-pregunta { font-size: 1.125rem; margin: 0 0 .75rem; }
.test-opciones { display: grid; gap: .5rem; margin-top: 1rem; }
.test-opcion { text-align: left; padding: .75rem 1rem; font: inherit; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--r-ctrl); cursor: pointer; }
.test-opcion:hover:not(:disabled) { border-color: var(--marca); background: var(--hover); }
.test-opcion:disabled { cursor: default; opacity: .75; }
.test-opcion.ok { opacity: 1; border-color: var(--positivo); background: var(--positivo-suave); font-weight: 700; }
.test-opcion.ok::before { content: '✓ '; color: var(--positivo); }
.test-opcion.ko { opacity: 1; border-color: var(--critico); background: var(--critico-suave); }
.test-opcion.ko::before { content: '✗ '; color: var(--critico); }
.test-respuesta { margin-top: 1rem; }
.test-final h2 { margin: 1rem 0 .25rem; }
.test-insignia svg { display: block; width: 100%; max-width: 30rem; height: auto; }
.test-botones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .5rem; }
.test-final .lista li { margin-bottom: .5rem; }