/* Órdenes (ordenes.html): las 12 Órdenes con filtros, en la guía de estilo (dev-docs/ui-kit.html). Tokens de iso.css;
   el encabezado y los títulos, de herramientas.css. */
:root {
  --c-eco: #7fb276; --c-mil: #e07a70; --c-def: #7ea7dc; --c-ase: #cf9a62; --c-eda: #b98ac6; --c-mov: #5fc0bd;
  --emblem-edge: #efe3c8;   /* contorno del escudo: claro sobre el fondo oscuro */
}
:root[data-theme="light"] {
  --c-eco: #3d6b3a; --c-mil: #a8322b; --c-def: #2f5d94; --c-ase: #7a4d22; --c-eda: #6b3d78; --c-mov: #1f7a78;
  --emblem-edge: #4a3f33;
}

.or-filtros { display: grid; gap: 10px; padding: 14px 0; margin-bottom: 24px; border-block: 1px solid var(--muro); }
.or-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.or-fila .or-lbl { min-width: 76px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.or-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--muro-claro);
  background: var(--superficie); color: var(--pergamino); font: 500 14px/1 var(--sans); cursor: pointer; }
.or-chip:hover { border-color: var(--ambar); }
.or-chip[aria-pressed="true"] { background: var(--pergamino); color: var(--noche); border-color: var(--pergamino); }
.or-chip .or-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.or-chip .or-rey { width: 12px; height: 16px; }
.or-chip:focus-visible, .or-tile:focus-visible { outline: none; box-shadow: var(--foco); }

.or-armorial { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .or-armorial { grid-template-columns: minmax(0, 1fr); } }
.or-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.or-tile { min-width: 0; display: grid; justify-items: center; gap: 8px; padding: 16px 8px 12px; border-radius: 14px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--muro); color: var(--pergamino); font: inherit; transition: border-color .15s, transform .15s; }
.or-tile:hover { border-color: var(--muro-claro); transform: translateY(-2px); }
.or-tile[aria-pressed="true"] { border-color: var(--ambar); box-shadow: inset 0 0 0 1px var(--ambar); }
.or-tile svg { width: 64px; height: auto; display: block; }
.or-tile .or-nom { font: 400 20px/1.1 var(--serif); text-align: center; }
.or-puntos { display: flex; gap: 4px; }
.or-puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: block; }
.or-vacio { margin: 0; padding: 12px 0; color: var(--humo); }

.or-ficha { position: sticky; top: 16px; display: grid; gap: 12px; padding: 20px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--muro); }
@media (max-width: 900px) { .or-ficha { position: static; } }
.or-cab { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; }
.or-cab svg { width: 72px; height: auto; display: block; }
.or-cab h2 { margin: 0; font: 400 32px/1.05 var(--serif); }
.or-bando { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); }
.or-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ceniza); text-wrap: pretty; }
.or-bono { display: grid; gap: 4px; padding-top: 12px; border-top: 1px dashed var(--muro-claro); }
.or-bono-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.or-bono-cab b { font: 600 15px var(--sans); }
.or-tag { padding: 2px 7px; border-radius: 4px; border: 1px solid var(--c); color: var(--c); font: 500 10.5px var(--mono); letter-spacing: .04em; }
.or-bono p { margin: 0; font-size: 15px; line-height: 1.45; }