/* Estilos de las páginas de fiori/extra.js: tablas y vistas CDS, rutas de aprendizaje, convertidor y foro en la portada */

/* De tabla clásica a vista CDS */
.tcds-tabla th[scope="row"] { white-space: nowrap; }
.tcds-tabla th[scope="row"] small { display: block; font-weight: 400; color: var(--etiqueta); font-size: .75rem; }
.tcds-vista { display: inline-block; margin: 0 .25rem .25rem 0; padding: .0625rem .375rem; border-radius: .25rem; background: var(--positivo-suave); color: var(--texto); font-family: var(--mono); font-size: .8125rem; }
.tcds-sin { color: var(--etiqueta); font-size: .8125rem; }
.tcds-tabla tr[hidden] { display: none; }

/* Rutas de aprendizaje */
.rutas-indice { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.rutas-indice .chip { text-decoration: none; }
.rutas-indice .chip:hover { background: var(--marca-suave); color: var(--marca); }
.ruta { background: var(--superficie); border-radius: .75rem; box-shadow: var(--sombra-1); padding: 1.25rem 1.5rem; margin: 1.5rem 0; scroll-margin-top: 7.5rem; }
.ruta-cab { display: flex; gap: 1rem; align-items: flex-start; }
.ruta-ico { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--marca-suave); color: var(--marca); }
.ruta-ico .ico { width: 1.5rem; height: 1.5rem; }
.ruta-cab h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.ruta-cab p { margin: 0; }
.ruta-nivel { font-size: .75rem; font-weight: 700; color: var(--marca); text-transform: uppercase; letter-spacing: .04em; }
.ruta-progreso { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .5rem; }
.ruta-barra { flex: 1; height: .5rem; border-radius: 1rem; background: var(--relleno); overflow: hidden; }
.ruta-barra i { display: block; height: 100%; background: var(--positivo); border-radius: 1rem; transition: width .3s; }
.ruta-cuenta { font-size: .8125rem; color: var(--etiqueta); white-space: nowrap; }
.ruta-pasos { list-style: none; margin: 0; padding: 0; }
.ruta-pasos li { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem 0; border-top: 1px solid var(--borde-suave); }
.ruta-pasos li > div { min-width: 0; }
.ruta-pasos small { display: block; color: var(--etiqueta); font-size: .8125rem; }
.ruta-pasos li.hecho a { text-decoration: line-through; color: var(--etiqueta); }
.ruta-n { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--relleno); color: var(--etiqueta); }
.ruta-pasos li.hecho .ruta-n { background: var(--positivo); color: #fff; }
.ruta-check { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; cursor: pointer; }
.ruta-check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--positivo); cursor: pointer; }
.rutas-pie { margin: 1rem 0 2rem; }

/* Convertidor */
.conv-entrada { display: block; width: 100%; min-height: 14rem; padding: .75rem; border: 1px solid var(--campo-borde); border-radius: var(--r-ctrl); background: var(--superficie); color: var(--texto); font: .8125rem/1.5 var(--mono); resize: vertical; tab-size: 2; }
.conv-entrada:focus { outline: .125rem solid var(--marca); outline-offset: .0625rem; }
.conv-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .75rem; }
.conv button.btn-enfasis { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.conv-opcion { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--etiqueta); }
.conv-cambios { padding-left: 1.25rem; }
.conv-cambios > li { margin: 0 0 1.25rem; }
.conv-cambios p { margin: .375rem 0; }
.conv-linea { font-size: .75rem; font-weight: 700; color: var(--etiqueta); }
.conv-par { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.conv-par pre { margin: 0; padding: .5rem .75rem; border-radius: .375rem; font: .75rem/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; overflow-x: auto; border-left: .1875rem solid; }
.conv-antes { background: var(--critico-suave); border-color: var(--critico) !important; }
.conv-ahora { background: var(--positivo-suave); border-color: var(--positivo) !important; }
.conv-ojo { font-size: .8125rem; padding: .375rem .625rem; border-radius: .375rem; background: var(--relleno); }
@media (max-width: 40rem) { .conv-par { grid-template-columns: 1fr; } }


/* Descargas: las chuletas de abap.es */
.chuletas .chuleta { margin: .75rem 0; }

/* Portada: el convertidor destacado */
.conv-portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: center;
  padding: 1.5rem; background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); border-left: .25rem solid var(--marca); }
.conv-portada h2 { margin: .5rem 0; }
.conv-portada p { margin: 0; }
.conv-portada .conv-entrada { min-height: 8.5rem; }
.conv-portada .btn-enfasis .ico { width: 1.125rem; height: 1.125rem; }
@media (max-width: 48rem) { .conv-portada { grid-template-columns: 1fr; } }

/* Portada: Apoya abap.es */
.apoya { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.5rem; background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); border-left: .25rem solid var(--positivo); scroll-margin-top: 7.5rem; }
.apoya-txt { flex: 1 1 28rem; }
.apoya h2 { margin: 0 0 .5rem; }
.apoya p { margin: 0 0 .5rem; }
.apoya-nota { font-size: .8125rem; color: var(--etiqueta); }
.apoya-btn { flex: none; }
.apoya-btn .ico { width: 1rem; height: 1rem; }

/* Barra superior: botón «Donar» */
.shell-btn.donar-btn, .shell-btn.tienda-btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; width: auto; gap: .375rem; padding: 0 .75rem; border-radius: 1rem; font-weight: 700; font-size: .8125rem; }
.shell-btn.donar-btn svg { color: #e8462b; }
.shell-btn.donar-btn svg path { fill: currentColor; stroke: currentColor; }
.shell-btn.tienda-btn svg { color: #f29d0c; }
.shell-btn.tienda-btn svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 40rem) { .shell-btn.donar-btn span, .shell-btn.tienda-btn span { display: none; } .shell-btn.donar-btn, .shell-btn.tienda-btn { padding: 0; width: 2.25rem; } }

/* Página «Haz una donación» (al estilo de Wikipedia) */
.donar-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin: 1.5rem 0; }
@media (max-width: 48rem) { .donar-rejilla { grid-template-columns: 1fr; } }
.donar-carta { background: #fef9e7; color: #202122; border-radius: var(--r-tile); padding: 1.5rem 1.75rem; box-shadow: var(--sombra-1); font-size: .9375rem; line-height: 1.6; }
.donar-carta p { margin: 0 0 .875rem; }
.donar-carta a { color: #0645ad; }
.donar-saludo { font-weight: 700; }
.donar-firma { font-style: italic; margin-bottom: 0 !important; }
.donar-caja { background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); padding: 1.5rem; position: sticky; top: 7.5rem; }
.donar-caja h2 { margin: 0 0 1rem; font-size: 1.125rem; }
.donar-importes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.donar-imp { height: 2.75rem; border: 1px solid var(--campo-borde); border-radius: var(--r-ctrl); background: var(--superficie); color: var(--texto); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.donar-imp:hover { border-color: var(--marca); }
.donar-imp[aria-checked="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.donar-otra { margin-top: .75rem; }
.donar-otra[hidden] { display: none; }
.donar-ir { display: flex; justify-content: center; width: 100%; height: 3rem; margin-top: 1rem; font-size: 1rem; }
.donar-nota { margin: .75rem 0 0; font-size: .75rem; color: var(--etiqueta); }
/* En móvil la barra oculta los demás enlaces (foro, contacto), pero «Donar» se queda, solo con el corazón */
.shell-barra > a.shell-btn.donar-btn, .shell-barra > a.shell-btn.tienda-btn { display: inline-flex; }
/* En móvil, primero la caja de donar y después la carta */
@media (max-width: 48rem) { .donar-caja { order: -1; position: static; } }

/* Selector de idioma ES | EN (barra superior) */
.idiomas { display: inline-flex; align-items: center; gap: .125rem; margin: 0 .25rem; padding: .125rem; border-radius: 1rem; background: var(--shell-hover); }
.idiomas a { display: inline-grid; place-items: center; min-width: 2rem; height: 1.75rem; padding: 0 .375rem; border-radius: 1rem; font-size: .75rem; font-weight: 700; color: var(--shell-texto); text-decoration: none; }
.idiomas a:hover { background: var(--superficie); text-decoration: none; }
.idiomas a[aria-current="true"] { background: var(--marca); color: var(--sobre-marca); }

/* Menú en inglés: enlaces a páginas que solo están en español */
.nuevo.es { background: var(--relleno); color: var(--etiqueta); }
.tcds-nota { font-size: .8125rem; color: var(--etiqueta); }

/* Convertidor: revisión de errores */
.conv-errores { margin: 1rem 0; padding: .75rem 1rem; border-radius: .5rem; background: var(--critico-suave); border-left: .25rem solid var(--critico); }
.conv-errores h3 { margin: 0 0 .5rem; font-size: 1rem; }
.conv-errores .lista { margin: 0; }
.conv-duda { opacity: .85; }
.conv-ok { padding: .5rem .75rem; border-radius: .5rem; background: var(--positivo-suave); }
/* En móvil solo se ve el idioma al que se puede cambiar, para dejar sitio al buscador */
@media (max-width: 40rem) {
  .idiomas { margin: 0; padding: 0; background: none; }
  .idiomas a[aria-current="true"] { display: none; }
  .idiomas a { min-width: 2.25rem; height: 2.25rem; }
  .shell-btn.donar-btn, .shell-btn.tienda-btn { flex: none; }
}

/* Listados de transacciones y tablas: columna del módulo de SAP (fiori/app.js → informe) */
.tabla .col-mod { width: 1%; white-space: nowrap; }
.chip-mod { display: inline-block; min-width: 2.25rem; text-align: center; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; padding: .0625rem .4375rem; border-radius: var(--r-chip); background: var(--marca-suave); color: var(--marca); }
@media (max-width: 40rem) { .tabla.con-mod th.col-mod, .tabla.con-mod td.col-mod { padding-left: .25rem; padding-right: .25rem; } }

/* ---------- Colaboradores (/colaboradores/, fiori/extra.js): una tarjeta de presentación por colaborador ---------- */
.colab-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1.25rem; margin: 2rem 0; }
.colab-tarjeta { background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); padding: 1.5rem; display: flex; flex-direction: column; }
.colab-cab { display: flex; align-items: center; gap: 1rem; }
.colab-cab h2 { margin: 0; font-size: 1.25rem; }
.colab-ini { flex: none; width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.375rem;
  background: var(--marca-suave); color: var(--marca); }
.colab-cargo { margin: .125rem 0 0; color: var(--etiqueta); font-size: .9375rem; }
.colab-lugar { margin: .125rem 0 0; color: var(--etiqueta); font-size: .8125rem; }
.colab-lugar::before { content: '📍 '; }
.colab-resumen { margin: 1rem 0 0; font-size: .9375rem; line-height: 1.6; }
.colab-aptitudes { list-style: none; padding: 0; margin: .875rem 0 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.colab-aptitudes li { font-size: .75rem; font-weight: 700; padding: .125rem .625rem; border-radius: var(--r-chip); background: var(--relleno); color: var(--etiqueta); }
.colab-aportes { border-top: 1px solid var(--borde-suave); margin-top: 1.125rem; padding-top: .875rem; }
.colab-tit { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; color: var(--etiqueta); text-transform: uppercase; letter-spacing: .04em; }
.colab-aporte { display: flex; gap: .75rem; align-items: flex-start; color: var(--texto); padding: .375rem .5rem; margin: 0 -.5rem; border-radius: var(--r-ctrl); }
.colab-aporte:hover { background: var(--hover); text-decoration: none; }
.colab-aporte .ico { flex: none; width: 1.375rem; height: 1.375rem; color: var(--marca); margin-top: .125rem; }
.colab-aporte b { display: block; }
.colab-aporte small { display: block; color: var(--etiqueta); font-size: .8125rem; }
.colab-nota { color: var(--etiqueta); font-size: .75rem; margin: .375rem 0 0; }
.colab-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1.25rem; }
.colab-botones a { display: inline-flex; align-items: center; gap: .375rem; }
.colab-botones .ico { width: 1rem; height: 1rem; }
.colab-unete { padding: 1.25rem 1.5rem; background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); max-width: 52rem; margin-bottom: 2rem; }
.colab-unete h2 { margin: 0 0 .5rem; font-size: 1.125rem; }
.colab-unete p { margin: 0; }

/* ---------- Guías de colaboradores (capítulos de comun/guias.js): índice lateral ---------- */
.guia-autor { color: var(--etiqueta); font-size: .875rem; margin: .75rem 0 0; }
.guia { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.guia .op-cuerpo { min-width: 0; }
.guia-indice { position: sticky; top: 7.5rem; }
.guia-det { background: var(--superficie); border-radius: var(--r-tile); box-shadow: var(--sombra-1); }
.guia-det summary { cursor: pointer; padding: .875rem 1rem; font-weight: 700; display: flex; align-items: baseline; gap: .5rem; list-style: none; }
.guia-det summary::-webkit-details-marker { display: none; }
.guia-det summary::after { content: ''; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid var(--etiqueta); border-bottom: 2px solid var(--etiqueta); transform: rotate(45deg); align-self: center; transition: transform .2s; }
.guia-det[open] summary::after { transform: rotate(-135deg); }
.guia-det summary small { font-weight: 400; color: var(--etiqueta); font-size: .8125rem; }
.guia-det ol { margin: 0; padding: 0 .5rem .75rem; list-style: none; counter-reset: cap; max-height: calc(100vh - 14rem); overflow-y: auto; border-top: 1px solid var(--borde-suave); }
.guia-det li { counter-increment: cap; }
.guia-det li a { display: flex; gap: .5rem; padding: .375rem .5rem; border-radius: var(--r-ctrl); color: var(--texto); font-size: .8125rem; line-height: 1.35; }
.guia-det li a::before { content: counter(cap); flex: none; width: 1.5rem; color: var(--etiqueta); font-variant-numeric: tabular-nums; text-align: right; }
.guia-det li a:hover { background: var(--hover); text-decoration: none; }
.guia-det li.actual a { background: var(--marca-suave); color: var(--marca); font-weight: 700; }
.guia-det li.actual a::before { color: var(--marca); }
/* Recuadros de las guías: nota del editor, buena práctica y rendimiento */
.recuadro { border-left: .1875rem solid; border-radius: var(--r-ctrl); padding: .25rem 1.25rem .5rem; margin: 0 0 1.25rem; }
.recuadro .rec-tit { font-weight: 700; margin: .75rem 0 .375rem; }
.recuadro.nota { background: var(--marca-suave); border-color: var(--marca); }
.recuadro.practica { background: var(--positivo-suave); border-color: var(--positivo); }
.recuadro.rendimiento { background: rgba(233, 115, 12, .1); border-color: #E9730C; }
@media (max-width: 60rem) {
  .guia { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .guia-indice { position: static; }
  .guia-det ol { max-height: 60vh; }
}

/* ---------- Compartir (fiori/app.js, ponerCompartir): botón en la cabecera de las páginas de contenido ---------- */
.op-cab .op-in { position: relative; }
.compartir { position: absolute; top: 0; right: 0; z-index: 5; }
.compartir-btn { display: inline-flex; align-items: center; gap: .375rem; }
.compartir-btn .ico { width: 1rem; height: 1rem; }
.compartir-menu { position: absolute; right: 0; top: calc(100% + .375rem); min-width: 13rem; padding: .375rem; background: var(--superficie);
  border-radius: var(--r-ctrl); box-shadow: var(--sombra-2); }
.compartir-menu[hidden] { display: none; }
.compartir-menu a, .compartir-menu button { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .625rem; border: 0; background: none;
  border-radius: var(--r-ctrl); color: var(--texto); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.compartir-menu a:hover, .compartir-menu button:hover { background: var(--hover); text-decoration: none; }
.compartir-menu .ico { width: 1.125rem; height: 1.125rem; color: var(--etiqueta); }
.compartir-menu a:first-child .ico { color: var(--marca); }
.compartir-menu hr { border: 0; border-top: 1px solid var(--borde-suave); margin: .25rem 0; }
/* Enlace a un apartado: aparece al pasar el ratón por su título (y al tener el foco) */
.enlace-sec { margin-left: .5rem; padding: .125rem; border: 0; background: none; color: var(--etiqueta); cursor: pointer; opacity: 0; vertical-align: middle; border-radius: var(--r-ctrl); }
.enlace-sec .ico { width: 1rem; height: 1rem; display: block; }
.op-sec > h2:hover .enlace-sec, .enlace-sec:focus-visible { opacity: 1; }
.enlace-sec:hover { color: var(--marca); background: var(--hover); }
@media (hover: none) { .enlace-sec { display: none; } }
@media (max-width: 40rem) {
  .compartir { position: static; margin: .75rem 0 0; }
  .compartir-menu { right: auto; left: 0; }
}

/* Preguntas de repaso: la pregunta se ve, la respuesta se abre con «Ver respuesta» */
ol.repaso { margin: 0 0 1rem; padding-left: 1.5rem; }
ol.repaso > li { margin: 0 0 .5rem; }
ol.repaso > li::marker { font-weight: 700; color: var(--etiqueta); }
.repaso-p { border: 1px solid var(--borde-suave); border-radius: var(--r-ctrl); background: var(--superficie); }
.repaso-p > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding: .6rem .85rem; }
.repaso-p > summary::-webkit-details-marker { display: none; }
.repaso-ver { flex: none; font-size: .875rem; font-weight: 600; color: var(--marca); }
.repaso-ver::before { content: '▸ '; }
.repaso-p > summary:hover .repaso-ver { text-decoration: underline; }
.repaso-p[open] .repaso-ver { visibility: hidden; }
.repaso-p > p { margin: 0; padding: .6rem .85rem .75rem; border-top: 1px solid var(--borde-suave); }

/* Tienda (fiori/tienda.js): fichas de libros y del puesto de trabajo, y recuadro «Libro de referencia» en los artículos */
.tienda-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.tienda-ficha { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--r-tile); box-shadow: var(--sombra-1); overflow: hidden; }
.tienda-portada { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; background: var(--marca-suave); color: var(--marca); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tienda-portada .ico { width: 1.5rem; height: 1.5rem; }
.tienda-datos { display: flex; flex-direction: column; flex: 1; padding: 1rem; }
.tienda-datos h3 { margin: 0 0 .25rem; font-size: 1rem; line-height: 1.35; }
.tienda-datos > p { margin: 0 0 .75rem; }
.tienda-nivel { margin: 0 0 .5rem !important; }
.tienda-autor { color: var(--etiqueta); font-size: .875rem; }
.tienda-mirar { font-weight: 700; margin-bottom: .25rem !important; }
.tienda-datos .lista { margin: 0 0 .75rem; }
.tienda-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.tienda-aviso { color: var(--etiqueta); font-size: .8125rem; border-top: 1px solid var(--borde-suave); padding-top: 1rem; }
.tienda-recuadro { margin: 2rem 0; padding: 1rem 1.25rem; background: var(--superficie); border: 1px solid var(--borde-suave); border-left: 4px solid var(--marca); border-radius: var(--r-ctrl); box-shadow: var(--sombra-1); }
.tienda-rec-tit { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-weight: 700; color: var(--marca); }
.tienda-rec-libro { display: flex; align-items: flex-start; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--borde-suave); }
.tienda-rec-txt { flex: 1; min-width: 0; }
.tienda-rec-txt .tienda-botones { margin-top: .75rem; }
.tienda-rec-libro b { display: block; }
.tienda-rec-libro span { display: block; color: var(--etiqueta); font-size: .875rem; }
.tienda-rec-libro p { margin: .35rem 0 0; }
.tienda-rec-libro .tienda-botones { margin: 0; }
.tienda-rec-pie { margin: .5rem 0 0; color: var(--etiqueta); font-size: .8125rem; }
.donar-afiliado { display: flex; gap: 1rem; align-items: flex-start; margin: 2rem 0; padding: 1rem 1.25rem; background: var(--marca-suave); border-radius: var(--r-tile); }
.donar-afiliado > .ico { flex: none; width: 2rem; height: 2rem; color: var(--marca); }
.donar-afiliado h2 { margin: 0 0 .5rem; font-size: 1.125rem; }
.donar-afiliado p { margin: 0 0 .75rem; }
.donar-afiliado p:last-child { margin: 0; }

/* Portada dibujada de los libros (no es la foto real de Amazon) */
.tienda-ficha.libro { flex-direction: row; }
.tapa { flex: none; display: flex; flex-direction: column; justify-content: space-between; width: 7.5rem; min-height: 10rem; padding: .75rem .65rem .65rem .9rem; color: #fff; position: relative; overflow: hidden; }
.tapa::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .3rem; background: rgba(0,0,0,.25); }
.tapa::after { content: ''; position: absolute; right: -1.5rem; bottom: -1.5rem; width: 5rem; height: 5rem; border-radius: 50%; background: rgba(255,255,255,.12); }
.tapa-sappress { background: linear-gradient(160deg, #0a6ed1, #0b3a75); }
.tapa-espresso { background: linear-gradient(160deg, #8a5a2b, #4a2c14); }
.tapa-otra { background: linear-gradient(160deg, #2f7d5b, #17402e); }
.tapa-ed { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.tapa-tit { font-size: .8125rem; font-weight: 700; line-height: 1.25; margin: .5rem 0; position: relative; z-index: 1; }
.tapa-aut { font-size: .625rem; opacity: .85; position: relative; z-index: 1; }
.tapa-peq { width: 4.5rem; min-height: 6.25rem; padding: .5rem .4rem .45rem .6rem; border-radius: .2rem; box-shadow: var(--sombra-1); }
.tapa-peq .tapa-ed { font-size: .5rem; }
.tapa-peq .tapa-tit { font-size: .625rem; margin: .3rem 0; }
.tapa-peq .tapa-aut { display: none; }
.tienda-nivel { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 30rem) { .tapa { width: 5.5rem; } .tapa-tit { font-size: .6875rem; } }

.tapa-img { flex: none; width: 7.5rem; height: auto; align-self: flex-start; object-fit: contain; background: #fff; }
.tapa-img.tapa-peq { width: 4.5rem; min-height: 0; padding: 0; }