/* ============================================================
   Botín — estilos propios
   ------------------------------------------------------------
   Usa las variables de assets/css/oldenait.css. Violeta para lo
   que se toca, ámbar para números. Las zonas del mapa van en
   violeta, más opacas cuantos más contenedores tienen. Las
   rarezas usan los colores del juego, siempre con su nombre.
   ============================================================ */

:root {
  --bot-comun: #A9AEB8;
  --bot-pococomun: #5FCB66;
  --bot-raro: #4AA8FF;
  --bot-epico: #C37BFF;
  --bot-legendario: #FFB547;
  --bot-salida: #35D0BA;
}

.bot { padding-top: clamp(20px, 3vw, 36px); padding-bottom: var(--paso); }
.bot [hidden] { display: none !important; }
.bot-con-mapa .bot { padding-bottom: 40px; }
@media (min-width: 1101px) { .bot-con-mapa .bot > .contenedor { width: min(94%, 1680px); } }
.bot .migas { margin-bottom: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bot .migas .juego { vertical-align: middle; }

/* ── Cabecera ──────────────────────────────────────────────── */
.bot-cabecera { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.bot-cabecera-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.bot-cabecera h1 { font-size: var(--t-38); }
.bot-cabecera h1 span { color: var(--apagado); font-weight: 600; font-size: .62em; margin-left: 4px; }
.bot-cabecera--inicio { max-width: 780px; gap: 14px; margin-bottom: 30px; }
.bot-cabecera--inicio h1 { font-size: var(--t-56); }
.bot-lema { color: var(--apagado); font-size: var(--t-17); max-width: 70ch; }
.bot-dato { color: var(--ambar); font-size: var(--t-15); font-weight: 600; }

.bot-pestanas { display: flex; flex-wrap: wrap; gap: 4px; }
.bot-pestanas a {
  font-size: 13.5px; font-weight: 600; color: var(--apagado); text-decoration: none;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--linea);
  transition: border-color .15s ease, color .15s ease;
}
.bot-pestanas a:hover { color: var(--texto); border-color: var(--linea-viva); }
.bot-pestanas a[aria-current="page"] { color: #0A0715; background: var(--violeta); border-color: var(--violeta); }
.bot-pestanas .bot-pestana-armas { border-style: dashed; }

/* ── Inicio ────────────────────────────────────────────────── */
.bot-seccion { margin-top: 36px; }
.bot-seccion h2 { font-size: var(--t-28); margin-bottom: 16px; }
.bot-grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.bot-tarjeta {
  display: flex; flex-direction: column; gap: 7px; padding: 12px; height: 100%;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  color: var(--texto); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.bot-tarjeta:hover { border-color: var(--violeta); transform: translateY(-2px); color: var(--texto); }
.bot-tarjeta-mapa { display: block; aspect-ratio: 4 / 3; border-radius: var(--radio-chico); background: var(--noche); overflow: hidden; }
.bot-tarjeta-mapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bot-tarjeta-mapa--armas { display: grid; place-items: center; color: var(--violeta-claro); background: radial-gradient(circle at 50% 60%, rgba(124, 92, 255, .22), transparent 70%), var(--noche); }
.bot-tarjeta-mapa--armas svg { width: 46%; height: auto; }
.bot-tarjeta-nombre { font-size: var(--t-21); font-weight: 800; font-stretch: var(--condensada); }
.bot-tarjeta-datos { font-size: 13px; color: var(--apagado); }
.bot-tarjeta-top { font-size: 12.5px; color: var(--tenue); line-height: 1.45; }

.bot-pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; max-width: 70ch; color: var(--apagado); }
.bot-pasos b { color: var(--texto); }
.bot-faq { max-width: 820px; }
.bot-faq details { border-bottom: 1px solid var(--linea); }
.bot-faq summary { list-style: none; cursor: pointer; padding: 14px 0; font-weight: 650; font-size: var(--t-17); display: flex; justify-content: space-between; gap: 16px; }
.bot-faq summary::-webkit-details-marker { display: none; }
.bot-faq summary::after { content: '+'; color: var(--violeta-claro); font-size: 22px; line-height: 1; font-weight: 400; }
.bot-faq details[open] summary::after { content: '–'; }
.bot-faq details p { color: var(--apagado); padding-bottom: 14px; }
.bot-aviso-legal { margin-top: 18px; font-size: 12.5px; color: var(--tenue); max-width: 100ch; }
.bot-aviso-legal a { color: var(--apagado); }

/* ── La aplicación del mapa: tres columnas ─────────────────── */
.bot-app { display: grid; grid-template-columns: 270px minmax(0, 1fr) 350px; gap: 18px; align-items: start; }
.bot-lado {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain;
}
.bot-lado:focus { outline: none; }

.bot-buscar {
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--noche); border: 1px solid var(--linea); border-radius: var(--radio-chico);
}
.bot-buscar:focus-within { border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(124, 92, 255, .2); }
.bot-buscar svg { width: 16px; height: 16px; color: var(--tenue); flex-shrink: 0; }
.bot-buscar input { flex: 1; min-width: 0; font: inherit; font-size: var(--t-14); color: var(--texto); background: transparent; border: 0; padding: 9px 0; outline: none; }
.bot-busqueda { font-size: 13.5px; color: var(--apagado); line-height: 1.5; margin: -4px 0 0; }
.bot-busqueda b { color: var(--texto); }

.bot-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.bot-grupo legend, .bot-subtitulo { font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); padding: 0; margin: 0 0 6px; }
.bot-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bot-chips button {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--apagado); cursor: pointer;
  background: var(--noche); border: 1px solid var(--linea); border-radius: 999px; padding: 5px 10px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.bot-chips button .cifra { color: var(--ambar); font-size: 11.5px; font-weight: 700; }
.bot-chips button:hover { color: var(--texto); border-color: var(--linea-viva); }
.bot-chips button[aria-pressed="true"] { background: var(--violeta); border-color: var(--violeta); color: #0A0715; }
.bot-chips button[aria-pressed="true"] .cifra { color: #0A0715; }
.bot-chips button:disabled { opacity: .5; cursor: default; }

.bot-zonas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.bot-zonas button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 550; line-height: 1.3; color: var(--texto);
  padding: 7px 8px; border-radius: var(--radio-chico); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.bot-zonas button:hover { background: var(--panel-alto); }
.bot-zonas button[aria-current="true"] { background: rgba(124, 92, 255, .14); border-color: rgba(124, 92, 255, .45); }
.bot-zonas .cifra { color: var(--ambar); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* El mapa */
.bot-centro { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bot-barra-mapa { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bot-grupo-botones { display: flex; gap: 4px; flex-wrap: wrap; }
.bot-icono, .bot-texto {
  height: 34px; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--texto);
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-chico); cursor: pointer;
}
.bot-icono { width: 34px; }
.bot-icono svg { width: 18px; height: 18px; }
.bot-texto { padding: 0 12px; }
.bot-icono:hover, .bot-texto:hover { border-color: var(--violeta); }
.bot-texto[aria-pressed="true"] { background: rgba(124, 92, 255, .18); border-color: var(--violeta); }

.bot-mapa {
  --prop: 1;
  position: relative; width: min(100%, calc((100vh - 190px) * var(--prop))); margin: 0 auto;
  background: var(--noche); border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.bot-mapa.con-zoom { touch-action: none; cursor: grab; }
.bot-mapa.con-zoom:active { cursor: grabbing; }
.bot-lienzo { position: relative; width: 100%; transform-origin: 0 0; will-change: transform; --escala: 1; }
.bot-lienzo > img { display: block; width: 100%; height: auto; pointer-events: none; }
.bot-sectores { position: absolute; inset: 0; width: 100%; height: 100%; }
.bot-zona {
  fill: rgba(124, 92, 255, .05); stroke: rgba(196, 184, 255, .42); stroke-width: 1.1; vector-effect: non-scaling-stroke;
  cursor: pointer; transition: fill .12s ease, stroke .12s ease, opacity .15s ease;
}
.bot-zona[data-nivel="2"] { fill: rgba(124, 92, 255, .13); }
.bot-zona[data-nivel="3"] { fill: rgba(124, 92, 255, .22); }
.bot-zona[data-nivel="4"] { fill: rgba(124, 92, 255, .34); }
.bot-zona:hover, .bot-zona.encima { fill: rgba(164, 142, 255, .42); stroke: #fff; stroke-width: 2.2; }
.bot-zona:focus { outline: none; }
.bot-zona:focus-visible { stroke: var(--ambar); stroke-width: 3; }
.bot-zona.activa { fill: rgba(255, 209, 102, .28); stroke: var(--ambar); stroke-width: 2.5; }
.con-filtro .bot-zona { opacity: .16; }
.con-filtro .bot-zona.coincide { opacity: 1; fill: rgba(164, 142, 255, .5); stroke: #fff; stroke-width: 1.8; }
.con-filtro .bot-zona.activa { opacity: 1; }

.bot-capa { position: absolute; inset: 0; pointer-events: none; }
.bot-nombre {
  position: absolute; transform: translate(-50%, -50%) scale(calc(1 / var(--escala))); white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; color: rgba(236, 234, 245, .82);
  text-shadow: 0 0 3px #000, 0 0 2px #000, 0 1px 0 #000;
  transition: opacity .15s ease;
}
.bot-nombre[data-nivel="1"] { color: rgba(236, 234, 245, .58); font-weight: 600; }
.bot-nombre.apagado { opacity: .15; }
.bot-nombre.activo { color: var(--ambar); }
.bot-salida {
  position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%) scale(calc(1 / var(--escala))) rotate(45deg);
  background: var(--bot-salida); border: 2px solid #04120F; border-radius: 3px; box-shadow: 0 0 0 1px rgba(53, 208, 186, .5);
}
.bot-salida-ico { display: inline-block; width: 10px; height: 10px; background: var(--bot-salida); border-radius: 2px; transform: rotate(45deg); vertical-align: middle; margin: 0 2px; }

.bot-globo {
  position: absolute; z-index: 5; max-width: 260px; pointer-events: none;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(14, 16, 32, .96); border: 1px solid var(--linea-viva); border-radius: var(--radio-chico);
  padding: 9px 11px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); font-size: 13px; color: var(--apagado);
}
.bot-globo b { color: var(--texto); font-size: 15px; font-stretch: var(--condensada); font-weight: 750; }
.bot-globo .cifra { color: var(--ambar); font-weight: 700; }
.bot-globo-cats { display: flex; flex-wrap: wrap; gap: 3px; }
.bot-globo-prob { font-size: 12.5px; }

.bot-cat {
  display: inline-block; font-size: 11.5px; font-weight: 650; color: var(--texto);
  padding: 1px 8px; border-radius: 999px; background: var(--panel-alto); border: 1px solid var(--linea-viva);
}

.bot-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--apagado); }
.bot-leyenda-escala { display: inline-flex; gap: 2px; }
.bot-leyenda-escala i { width: 16px; height: 10px; border-radius: 2px; border: 1px solid rgba(196, 184, 255, .5); }
.bot-leyenda-escala i[data-n="1"] { background: rgba(124, 92, 255, .05); }
.bot-leyenda-escala i[data-n="2"] { background: rgba(124, 92, 255, .13); }
.bot-leyenda-escala i[data-n="3"] { background: rgba(124, 92, 255, .22); }
.bot-leyenda-escala i[data-n="4"] { background: rgba(124, 92, 255, .34); }
.bot-leyenda-tip { margin-left: auto; color: var(--tenue); }

/* Detalle */
.bot-vacio h2 { font-size: var(--t-21); margin-bottom: 6px; }
.bot-vacio p { color: var(--apagado); font-size: 14px; margin: 0 0 8px; }
#detalle-contenido { display: flex; flex-direction: column; gap: 14px; }
.bot-det-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bot-det-cabeza h2 { font-size: var(--t-28); line-height: 1.05; }
.bot-cerrar { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; background: transparent; color: var(--apagado); border: 1px solid var(--linea); border-radius: var(--radio-chico); cursor: pointer; }
.bot-cerrar:hover { color: var(--texto); border-color: var(--violeta); }
.bot-cerrar svg { width: 18px; height: 18px; }
.bot-det-incluye { margin: -8px 0 0; font-size: 13px; color: var(--tenue); }
.bot-det-resumen { margin: 0; font-size: 14px; color: var(--apagado); }
.bot-det-resumen .cifra { color: var(--ambar); font-weight: 700; font-size: 16px; }
.bot-det-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.bot-det-sec h3 { font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); margin: 0 0 8px; font-stretch: 100%; }
.bot-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bot-barras li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 44px; align-items: center; gap: 8px; font-size: 13.5px; }
.bot-barras-barra { height: 8px; border-radius: 4px; background: var(--noche); border: 1px solid var(--linea); overflow: hidden; }
.bot-barras-barra i { display: block; height: 100%; background: var(--ambar); border-radius: 4px; }
.bot-barras-num { text-align: right; color: var(--ambar); font-weight: 700; font-variant-numeric: tabular-nums; }
.bot-nota { margin: 6px 0 0; font-size: 12px; color: var(--tenue); line-height: 1.45; }
.bot-conts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bot-conts summary { cursor: pointer; font-size: 14px; padding: 4px 0; list-style: none; }
.bot-conts summary::-webkit-details-marker { display: none; }
.bot-conts summary::after { content: ' +'; color: var(--violeta-claro); }
.bot-conts details[open] summary::after { content: ' –'; }
.bot-conts .cifra { color: var(--ambar); font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; min-width: 30px; }
.bot-conts p { margin: 0 0 6px 30px; font-size: 13px; color: var(--apagado); }
.bot-arcs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--apagado); }
.bot-arcs .cifra { color: var(--ambar); font-weight: 700; }
.bot-det-salida { margin: 0; font-size: 13.5px; color: var(--apagado); }
.bot-det-salida b { color: var(--texto); font-weight: 600; }

.bot-rarezas { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.bot-rareza, .arm-rareza {
  --r: var(--bot-comun);
  display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; white-space: nowrap;
  color: var(--r); background: color-mix(in srgb, var(--r) 14%, transparent); border: 1px solid color-mix(in srgb, var(--r) 40%, transparent);
}
[data-rareza="pococomun"] { --r: var(--bot-pococomun); }
[data-rareza="raro"] { --r: var(--bot-raro); }
[data-rareza="epico"] { --r: var(--bot-epico); }
[data-rareza="legendario"] { --r: var(--bot-legendario); }
.bot-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bot-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 66px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.bot-item-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-nivel { font-size: 11.5px; color: var(--apagado); text-align: right; }

.bot-mini {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--texto); text-align: left; align-self: flex-start;
  background: var(--panel-alto); border: 1px solid var(--linea-viva);
  border-radius: var(--radio-chico); padding: 7px 11px; cursor: pointer; margin-top: 8px;
}
.bot-mini:hover { border-color: var(--violeta); }

.bot-aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(120%); z-index: 60;
  background: var(--panel-alto); color: var(--texto); border: 1px solid var(--linea-viva); border-radius: 999px;
  padding: 9px 18px; font-size: 14px; box-shadow: var(--sombra); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease; max-width: calc(100% - 32px);
}
.bot-aviso.visible { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Armas ─────────────────────────────────────────────────── */
.arm { display: flex; flex-direction: column; gap: 34px; }
.arm-situaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 16px; }
.arm-situaciones button {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  font: inherit; color: var(--texto); background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 11px 13px;
  transition: border-color .15s ease, background .15s ease;
}
.arm-situaciones button b { font-size: 15.5px; font-weight: 700; }
.arm-situaciones button small { font-size: 12.5px; color: var(--apagado); line-height: 1.35; }
.arm-situaciones button:hover { border-color: var(--linea-viva); }
.arm-situaciones button[aria-pressed="true"] { border-color: var(--violeta); background: rgba(124, 92, 255, .16); }
.arm-recomendadas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.arm-rec { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; }
.arm-rec-cabeza { display: flex; align-items: center; gap: 10px; }
.arm-rec-pos { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--noche); border: 1px solid var(--linea-viva); color: var(--ambar); font-weight: 800; font-size: 13px; flex-shrink: 0; }
.arm-rec-nombre { font-size: var(--t-21); font-weight: 800; font-stretch: var(--condensada); color: var(--texto); text-decoration: none; }
.arm-rec-nombre:hover { color: var(--violeta-claro); }
.arm-rec-cabeza .arm-rareza { margin-left: auto; }
.arm-rec-motivo { margin: 0; font-size: 13px; color: var(--ambar); font-weight: 600; }
.arm-rec-nota { margin: 0; font-size: 13.5px; color: var(--apagado); line-height: 1.5; }

.arm-tabla-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.arm-filtro { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--apagado); }
.arm-filtro select { font: inherit; font-size: 13.5px; color: var(--texto); background: var(--noche); border: 1px solid var(--linea-viva); border-radius: var(--radio-chico); padding: 6px 8px; }
.arm-tabla-scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); }
.arm-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 860px; }
.arm-tabla th, .arm-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea); text-align: left; white-space: nowrap; }
.arm-tabla thead th { font-size: 12px; font-weight: 650; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; position: sticky; top: 0; background: var(--panel); }
.arm-tabla thead th:hover { color: var(--texto); }
.arm-tabla thead th[aria-sort="ascending"]::after { content: ' ↑'; color: var(--violeta-claro); }
.arm-tabla thead th[aria-sort="descending"]::after { content: ' ↓'; color: var(--violeta-claro); }
.arm-tabla tbody th { font-weight: 600; }
.arm-tabla tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--tenue); }
.arm-tabla tbody tr:hover { background: var(--panel-alto); }
.arm-tabla .num { text-align: right; }
.arm-tabla td.cifra { color: var(--ambar); font-variant-numeric: tabular-nums; }
.arm-nombre { color: var(--texto); text-decoration: none; }
.arm-nombre:hover { color: var(--violeta-claro); }
.arm-tier { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 4px; font-weight: 800; font-size: 12.5px; color: #0A0715; background: var(--tenue); }
.arm-tier[data-t="S"] { background: #FFD166; }
.arm-tier[data-t="A"] { background: #B9A8FF; }
.arm-tier[data-t="B"] { background: #8FB8E8; }
.arm-tier[data-t="C"] { background: #8B8FAE; }
.arm-tier[data-t="D"] { background: #5E6288; color: var(--texto); }

.arm-fichas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.arm-ficha { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 90px; }
.arm-ficha:target { border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(124, 92, 255, .2); }
.arm-ficha h3 { font-size: var(--t-21); }
.arm-ficha h3 small { font-size: 13px; font-weight: 500; color: var(--tenue); font-stretch: 100%; }
.arm-ficha header p { margin: 2px 0 0; font-size: 12.5px; color: var(--apagado); }
.arm-ficha-nota { margin: 0; font-size: 14px; color: var(--texto); line-height: 1.55; }
.arm-ficha-para { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.arm-ficha-para li { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--panel-alto); border: 1px solid var(--linea-viva); }
.arm-ficha-fuente { margin: auto 0 0; font-size: 12.5px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .bot-app { grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 14px; }
}
@media (max-width: 1100px) {
  .bot-app { grid-template-columns: 250px minmax(0, 1fr); }
  .bot-lado--detalle {
    position: fixed; z-index: 55; top: auto; left: 0; right: 0; bottom: 0; max-height: 70vh;
    border-radius: var(--radio) var(--radio) 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .6);
    transform: translateY(105%); transition: transform .22s ease; visibility: hidden;
  }
  .bot-lado--detalle.es-abierto { transform: translateY(0); visibility: visible; }
  .bot-lado--detalle .bot-vacio { display: none; }
}
@media (max-width: 760px) {
  .bot-app { grid-template-columns: minmax(0, 1fr); }
  .bot-centro { order: -1; }
  .bot-lado--filtros { position: static; max-height: none; }
  .bot-mapa { width: 100%; scroll-margin-top: 76px; }
  .bot-lado--detalle { max-height: 52vh; }
  .bot-cabecera h1 { font-size: var(--t-28); }
  .bot-cabecera h1 span { display: block; margin: 2px 0 0; font-size: .6em; }
  .bot-pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--lado)); padding: 0 var(--lado); width: calc(100% + 2 * var(--lado)); }
  .bot-pestanas::-webkit-scrollbar { display: none; }
  .bot-pestanas a { flex-shrink: 0; }
  .bot-leyenda-tip { display: none; }
  .bot-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bot-nombre { font-size: 9.5px; }
  .bot-nombre[data-nivel="1"] { display: none; }
  .con-zoom .bot-nombre[data-nivel="1"] { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .bot-lado--detalle, .bot-tarjeta, .bot-aviso, .bot-zona { transition: none; }
}
@media (pointer: coarse) {
  .bot-chips button, .bot-mini, .bot-zonas button, .bot-pestanas a { min-height: 44px; }
  .bot-pestanas a { display: inline-flex; align-items: center; }
  .bot-icono, .bot-texto { height: 44px; }
  .bot-icono { width: 44px; }
  .bot-cerrar { width: 44px; height: 44px; }
  .bot-conts summary { padding: 10px 0; }
}