/* Compendio Harford — consultor de reglas integrado en el estilo azul dossier del sitio. */
:root { --comp-accent: #2b75a8; }

.comp-intro { margin-bottom: 22px; }

/* barra de herramientas: pestañas + búsqueda + contador */
.comp-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px; margin-bottom: 22px;
  background: rgba(10, 34, 55, .55);
  border: 1px solid var(--line); border-radius: 4px;
  position: sticky; top: 76px; z-index: 10;
  backdrop-filter: blur(10px);
}
.comp-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.comp-tab {
  background: none; border: 1px solid transparent; color: #cbd7df;
  padding: 8px 15px; border-radius: 2px; cursor: pointer;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
}
.comp-tab:hover { background: rgba(43, 117, 168, .14); color: #fff; }
.comp-tab[aria-selected="true"] {
  background: rgba(43, 117, 168, .22); color: #fff;
  border-color: rgba(43, 117, 168, .5);
}
.comp-search {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px;
  background: rgba(3, 13, 23, .55); border: 1px solid var(--line);
  border-radius: 3px; padding: 8px 12px; color: var(--muted);
}
.comp-search input { flex: 1; background: none; border: none; color: var(--paper); outline: none; }
.comp-search input::placeholder { color: var(--steel-dark); }
.comp-count { color: var(--muted); font-size: .82rem; white-space: nowrap; letter-spacing: .04em; }

/* rejilla de tarjetas */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.comp-empty { color: var(--muted); grid-column: 1/-1; padding: 40px 0; text-align: center; }

.comp-card {
  --c: var(--comp-accent);
  text-align: left; cursor: pointer; color: var(--paper);
  background: linear-gradient(180deg, rgba(12, 40, 64, .5), rgba(6, 22, 38, .5));
  border: 1px solid var(--line); border-left: 3px solid color-mix(in srgb, var(--c) 60%, var(--line));
  border-radius: 5px; padding: 15px; display: flex; flex-direction: column; gap: 9px;
  transition: border-color .15s, transform .15s, background .15s;
}
.comp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); background: linear-gradient(180deg, rgba(16, 50, 78, .6), rgba(8, 28, 46, .6)); }
.comp-card .chead { display: flex; align-items: center; gap: 10px; }
.comp-card .cname { margin: 0; font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.comp-card .cname b { color: color-mix(in srgb, var(--c) 70%, var(--paper)); font-weight: 600; }
.comp-card .cdesc { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.comp-card .cdesc.empty { font-style: italic; opacity: .6; }
.comp-card .meta { margin-top: auto; font-family: ui-monospace, "SFMono-Regular", monospace; font-size: .68rem; color: var(--steel-dark); letter-spacing: .04em; }

/* chips y badges */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--steel); background: rgba(3, 13, 23, .4);
  border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px;
}
.chip.accent { color: color-mix(in srgb, var(--c, var(--comp-accent)) 75%, var(--paper)); border-color: color-mix(in srgb, var(--c, var(--comp-accent)) 40%, var(--line)); }
.chip.school { color: var(--c, var(--comp-accent)); border-color: color-mix(in srgb, var(--c, var(--comp-accent)) 45%, var(--line)); font-weight: 600; }
.chip.mini { font-size: .62rem; padding: 1px 8px; opacity: .9; }
.lvlbadge {
  font-family: ui-monospace, monospace; font-size: .66rem; font-weight: 600; white-space: nowrap;
  color: var(--c, var(--comp-accent)); border: 1px solid color-mix(in srgb, var(--c, var(--comp-accent)) 45%, var(--line));
  background: color-mix(in srgb, var(--c, var(--comp-accent)) 14%, transparent);
  border-radius: 5px; padding: 2px 7px;
}
.lvlbadge.big { font-size: .82rem; padding: 6px 11px; }

/* iconos */
.ficon { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--line); }
.card-icon { width: 34px; height: 34px; border-radius: 5px; border: 1px solid var(--line); flex-shrink: 0; }
.hicon { width: 46px; height: 46px; border-radius: 6px; border: 1px solid var(--line); flex-shrink: 0; }

/* panel de detalle (drawer lateral) */
.comp-scrim { position: fixed; inset: 0; background: rgba(2, 7, 13, .66); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.comp-scrim.on { opacity: 1; pointer-events: auto; }
.comp-sheet {
  /* el ancho del panel es consultable: lo cambia el lector con el tirador, asi que las
     reglas que dependen de el no pueden mirar el de la ventana */
  container-type: inline-size; container-name: ficha;
  position: fixed; top: 0; right: 0; height: 100vh; width: var(--sheet-w, min(1080px, 92vw));
  background: linear-gradient(180deg, #0a2237, #050f1a); border-left: 1px solid var(--line);
  box-shadow: var(--shadow); transform: translateX(100%); transition: transform .24s ease;
  z-index: 50; display: flex; flex-direction: column;
}
.comp-sheet.on { transform: translateX(0); }
.comp-sheet header {
  --c: var(--comp-accent); display: flex; align-items: center; gap: 13px;
  padding: 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), transparent);
}
.comp-sheet header h2 { margin: 0; font-family: var(--display); font-size: 1.4rem; color: #fff; }
.comp-sheet header .hmeta { font-size: .74rem; color: var(--muted); letter-spacing: .04em; margin-top: 2px; }
.comp-sheet .xwidth { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--muted); width: 34px; height: 34px; border-radius: 4px; cursor: pointer; font-size: .95rem; }
.comp-sheet .xwidth:hover { color: #fff; border-color: var(--harford-blue-light); background: rgba(43, 117, 168, .2); }
.comp-sheet .xwidth + .xclose { margin-left: 8px; }
.comp-sheet .xclose { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--paper); width: 34px; height: 34px; border-radius: 4px; cursor: pointer; font-size: 1rem; }
.comp-sheet .xclose:hover { background: rgba(43, 117, 168, .2); }
.comp-sheet .body { padding: 20px; overflow-y: auto; }

/* styles.css limita `.lead` a 700px para el resto del sitio y la ficha reutiliza esa
   clase: dentro del panel el texto ocupa el ancho disponible. */
.comp-sheet .lead { color: var(--paper); line-height: 1.65; margin: 0 0 18px; max-width: none; }
.comp-sheet .lead.muted { color: var(--muted); font-size: .92rem; }
.comp-sheet .lead p, .comp-sheet .fd p { margin: 0 0 9px; }
.comp-sheet .lead p:last-child, .comp-sheet .fd p:last-child { margin-bottom: 0; }
.comp-sheet .sec-h {
  font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--harford-blue-light); margin: 24px 0 12px; display: flex; align-items: center; gap: 10px;
}
.comp-sheet .sec-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* citas de sabor */
.comp-sheet blockquote { margin: 4px 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid color-mix(in srgb, var(--harford-blue-light) 60%, var(--line)); }
.comp-sheet blockquote p { font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--paper); line-height: 1.55; margin: 0 0 6px; }
.comp-sheet blockquote cite { display: block; font-style: normal; font-size: .82rem; color: var(--harford-blue-light); letter-spacing: .02em; }

/* rasgos */
.comp-sheet .feat { border-left: 2px solid var(--line); padding: 2px 0 2px 14px; margin: 0 0 15px; }
.comp-sheet .feat .fn { font-weight: 600; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comp-sheet .feat .lv { font-family: ui-monospace, monospace; font-size: .66rem; color: var(--harford-blue-light); border: 1px solid color-mix(in srgb, var(--harford-blue-light) 40%, var(--line)); border-radius: 5px; padding: 1px 6px; }
.comp-sheet .feat .ty { font-family: ui-monospace, monospace; font-size: .66rem; color: var(--steel-dark); text-transform: lowercase; }
.comp-sheet .feat .fd { font-size: .88rem; color: var(--muted); line-height: 1.55; margin: 5px 0 0; }
.comp-sheet .feat .opts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.comp-sheet .feat .opts li { font-size: .84rem; color: var(--paper); background: rgba(3, 13, 23, .4); border: 1px solid var(--line); border-left: 2px solid color-mix(in srgb, var(--harford-blue-light) 55%, var(--line)); border-radius: 6px; padding: 6px 10px; }

/* subclases */
/* Cada subraza mide unos 400px de alto: con 12px de hueco y un borde a 0.18 de opacidad,
   cuatro seguidas se leian como un unico muro de texto. Se separan con mas aire, un canto
   de color a la izquierda y una linea bajo el nombre que cierra la cabecera. */
.comp-sheet .sub { background: rgba(3, 13, 23, .35); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--harford-blue-light)); border-radius: 8px; padding: 14px 18px; margin: 0 0 12px; }
.comp-sheet .sub:last-child { margin-bottom: 0; }
/* La cabecera es el tirador del desplegable: boton de ancho completo, sin aspecto de boton */
.comp-sheet .sub .subname { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1.06rem; color: #fff; margin: 0; padding: 0; display: flex; align-items: center; gap: 9px; }
.comp-sheet .sub .subname:hover { color: var(--harford-blue-light); }
.comp-sheet .sub .subname:focus-visible { outline: 2px solid var(--harford-blue-light); outline-offset: 3px; border-radius: 3px; }
.comp-sheet .sub .subname .chev { margin-left: auto; flex-shrink: 0; color: var(--steel-dark); transition: transform .28s ease; }
.comp-sheet .sub.abierta .subname .chev { transform: rotate(180deg); }
/* Se anima la altura, medida en JS. El truco de la reja 0fr -> 1fr no vale aqui: con este
   contenido el alto automatico de la fila se colapsaba a 22px y la seccion no llegaba a
   abrirse. La altura se devuelve a auto al terminar, para que el contenido pueda crecer
   despues (imagenes que cargan tarde, por ejemplo). */
.comp-sheet .sub .subwrap { overflow: hidden; height: 0; transition: height .28s ease; }
.comp-sheet .sub .subbody { padding-top: 11px; margin-top: 10px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  .comp-sheet .sub .subwrap, .comp-sheet .sub .subname .chev { transition: none; }
}
/* Edad y alineamiento de la subraza: una linea de datos, no prosa */
.comp-sheet .sub .subficha { margin: 0 0 10px; font-size: .8rem; color: var(--steel); letter-spacing: .01em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip.lore { text-transform: none; letter-spacing: .02em; color: var(--warning, #d6a44f); border-color: color-mix(in srgb, var(--warning, #d6a44f) 40%, var(--line)); }
.comp-sheet .sub .subdesc { font-size: .86rem; color: var(--muted); font-style: italic; margin: 0 0 12px; }
.comp-sheet .sub .subdesc p { margin: 0 0 8px; }
.comp-sheet .sub .feat:last-child { margin-bottom: 0; }

/* conjuros: rejilla de datos + chips por nivel */
.comp-sheet .spellgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 6px; }
.comp-sheet .sg { background: rgba(3, 13, 23, .4); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; }
.comp-sheet .sg .sgk { font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .5px; text-transform: uppercase; color: var(--steel-dark); }
.comp-sheet .sg .sgv { font-size: .84rem; color: var(--paper); }
.comp-sheet .spelllvl { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 9px; }
.comp-sheet .spelllvl .spwrap { display: flex; flex-wrap: wrap; gap: 5px; }
.spellchip {
  font: inherit; font-size: .8rem; color: var(--paper); cursor: pointer;
  background: color-mix(in srgb, var(--c, var(--comp-accent)) 12%, rgba(3, 13, 23, .4));
  border: 1px solid color-mix(in srgb, var(--c, var(--comp-accent)) 35%, var(--line));
  border-radius: 20px; padding: 3px 11px; transition: background .12s;
}
.spellchip:hover { background: color-mix(in srgb, var(--c, var(--comp-accent)) 26%, rgba(3, 13, 23, .4)); }

/* tablas del manual */
.comp-tablewrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; }
.comp-tablewrap table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.comp-tablewrap th, .comp-tablewrap td { padding: 6px 11px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.comp-tablewrap thead th { background: rgba(43, 117, 168, .16); color: var(--harford-blue-light); font-family: var(--display); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.comp-tablewrap tbody tr:nth-child(even) { background: rgba(3, 13, 23, .28); }
.comp-tablewrap tbody tr:last-child td { border-bottom: none; }
.comp-tablewrap td { color: var(--muted); }
.comp-prognote { font-size: .82rem; color: var(--muted); font-style: italic; margin: 6px 2px 0; }

/* layout con barra de filtros (estilo base de datos) */
.comp-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 20px; align-items: start; }
.comp-layout.no-filters { grid-template-columns: 1fr; }
.comp-filters { position: sticky; top: 150px; align-self: start; background: rgba(10,34,55,.4); border: 1px solid var(--line); border-radius: 6px; padding: 14px; max-height: calc(100vh - 170px); overflow-y: auto; }
.comp-filters-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--harford-blue-light); margin-bottom: 10px; }
.comp-clear { background: none; border: 1px solid var(--line); color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 3px; padding: 3px 8px; cursor: pointer; }
.comp-clear:hover { color: #fff; border-color: var(--harford-blue-light); }
.comp-facet { margin: 0 0 14px; }
.comp-facet:last-child { margin-bottom: 0; }
.comp-facet h4 { margin: 0 0 6px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-dark); }
.comp-facet ul { list-style: none; margin: 0; padding: 0; }
.comp-facet label { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 4px; cursor: pointer; font-size: .85rem; color: var(--paper); }
.comp-facet label:hover { background: rgba(43,117,168,.12); }
.comp-facet input { accent-color: var(--harford-blue-light); flex-shrink: 0; }
.comp-facet label span { flex: 1; }
.comp-facet label em { font-style: normal; font-size: .72rem; color: var(--steel-dark); }
/* Interruptor de genero de la pestana Razas: dos mitades, una encendida */
.genero-sw { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.genero-sw button { flex: 1; padding: 7px 6px; border: 0; background: rgba(3,13,23,.5); color: var(--steel-dark); font: inherit; font-size: .82rem; cursor: pointer; }
.genero-sw button + button { border-left: 1px solid var(--line); }
.genero-sw button:hover { background: rgba(43,117,168,.18); color: var(--paper); }
.genero-sw button.on { background: var(--harford-blue-light); color: #061018; font-weight: 600; }
.genero-sw button:focus-visible { outline: 2px solid var(--harford-blue-light); outline-offset: -2px; }

.comp-filtertoggle { display: none; background: rgba(3,13,23,.5); border: 1px solid var(--line); color: var(--paper); border-radius: 3px; padding: 8px 14px; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }

@media (max-width: 820px) {
  .comp-layout { grid-template-columns: 1fr; }
  .comp-filtertoggle:not([hidden]) { display: inline-block; }
  .comp-filters { position: static; max-height: none; display: none; }
  .comp-filters.open { display: block; }
}

@media (max-width: 720px) {
  .comp-toolbar { position: static; }
  .comp-sheet { width: 100%; }
}

/* Panel de detalle: ancho de sobra para los stat blocks y las tablas, pero el texto
   corrido no se estira a lo ancho del panel, que a 1080px se leeria fatal. */
.comp-sheet .body > .lead,

/* Barra de desplazamiento con la paleta del sitio, en lugar de la del navegador. */
.comp-sheet .body,
.comp-filters { scrollbar-width: thin; scrollbar-color: rgba(43, 117, 168, .55) transparent; }
.comp-sheet .body::-webkit-scrollbar,
.comp-filters::-webkit-scrollbar { width: 10px; }
.comp-sheet .body::-webkit-scrollbar-track,
.comp-filters::-webkit-scrollbar-track { background: rgba(3, 13, 23, .5); }
.comp-sheet .body::-webkit-scrollbar-thumb,
.comp-filters::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(43, 117, 168, .75), rgba(12, 71, 119, .75));
  border: 2px solid transparent; background-clip: padding-box; border-radius: 6px;
}
.comp-sheet .body::-webkit-scrollbar-thumb:hover,
.comp-filters::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3d90c9, #2b75a8); background-clip: padding-box;
}

/* Alineacion de tabla por columna (la marca renderTable): las columnas cortas -nivel,
   bonificador, dado- centradas, y las de texto largo a la izquierda y con salto de linea,
   que si no obligan a desplazar la tabla en horizontal. */
.comp-tablewrap td.tc, .comp-tablewrap th.tc { text-align: center; }
.comp-tablewrap td.tl, .comp-tablewrap th.tl { text-align: left; white-space: normal; }
.comp-tablewrap { margin-left: auto; margin-right: auto; }

/* Tirador para cambiar el ancho del panel: franja estrecha en su borde izquierdo, con
   area de agarre mas ancha que la linea que se ve. El ancho elegido se recuerda. */
.comp-grip {
  position: absolute; left: 0; top: 0; width: 10px; height: 100%;
  margin-left: -5px; cursor: col-resize; z-index: 2; touch-action: none;
}
.comp-grip::before {
  content: ""; position: absolute; left: 4px; top: 0; width: 2px; height: 100%;
  background: transparent; transition: background .15s ease;
}
.comp-grip:hover::before, body.resizing-sheet .comp-grip::before { background: var(--harford-blue-light); }
/* mientras se arrastra: sin transicion (seguiria al raton con retardo) y sin seleccionar texto */
body.resizing-sheet { user-select: none; cursor: col-resize; }
body.resizing-sheet .comp-sheet { transition: none; }
@media (max-width: 900px) { .comp-grip { display: none; } }

/* nombre de la lista del libro que todavia no tiene ficha propia en el compendio */
.spellchip.pendiente {
  --c: var(--comp-muted);
  cursor: default;
  opacity: .62;
  border-style: dashed;
}
.spellchip.pendiente:hover { background: rgba(3, 13, 23, .4); }

/* Efecto de una receta, bajo su nombre en la tabla de la profesion */
.comp-sheet .rdesc{margin-top:3px;font-size:.82em;line-height:1.35;color:var(--muted,#8b8f98);max-width:52ch}

/* Ficha de objeto desplegable dentro de la tabla de recetas */
.comp-sheet .ilink{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  text-align:left;border-bottom:1px dotted currentColor}
.comp-sheet .ilink:hover,.comp-sheet .ilink:focus-visible{border-bottom-style:solid}
/* Calidades de WoW. La comun no se pinta de blanco: sobre fondo claro no se leeria */
.comp-sheet .q0{color:#8a8a8a}
.comp-sheet .q1{color:inherit}
.comp-sheet .q2{color:#3fa63f}
.comp-sheet .q3{color:#2f74c0}
.comp-sheet .q4{color:#8b46d6}
.comp-sheet .q5{color:#c8621a}
.comp-sheet tr.itemrow>td{padding:0}
.comp-sheet .itemcard{margin:2px 0 8px;padding:10px 12px;border-left:2px solid var(--line,#d7d3c8);
  background:color-mix(in srgb, currentColor 4%, transparent)}
.comp-sheet .ic-name{font-weight:600}
.comp-sheet .ic-alias{font-size:.82em;color:var(--muted,#8b8f98);margin-top:2px}
.comp-sheet .ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:2px 18px;margin-top:6px}
.comp-sheet .ic-r{display:flex;justify-content:space-between;gap:10px;font-size:.86em;
  border-bottom:1px dotted var(--line,#e2ded2)}
.comp-sheet .ic-k{color:var(--muted,#8b8f98)}
.comp-sheet .ic-v{font-variant-numeric:tabular-nums}
.comp-sheet .ic-stats{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88em;color:#3fa63f}
.comp-sheet .ic-ef{margin-top:6px;font-size:.86em;line-height:1.4}

/* Umbrales de color de una receta: naranja / amarillo / verde / gris, como en el juego */
.comp-sheet td.cds{white-space:nowrap;font-variant-numeric:tabular-nums}
.comp-sheet .cband{font-weight:600}
.comp-sheet .cband.c0{color:#d06a12}
.comp-sheet .cband.c1{color:#a08600}
.comp-sheet .cband.c2{color:#3fa63f}
.comp-sheet .cband.c3{color:#8a8a8a}
.comp-sheet .cband.cr{color:#c02b2b}
.comp-sheet .qmod{margin-left:6px;font-weight:600}
/* Icono del objeto: en la lista va pequeno y pegado al nombre; en la ficha, algo mayor */
.comp-sheet .iicon{width:14px;height:14px;border-radius:2px;vertical-align:-2px;margin-right:4px}
.comp-sheet .icicon{width:20px;height:20px;border-radius:3px;vertical-align:-4px;margin-right:6px}

/* Filtro dentro de la tabla de recetas */
.comp-sheet .rfiltbox{display:flex;align-items:center;gap:10px;margin:6px 0 8px}
.comp-sheet .rfilt{flex:1;min-width:0;padding:6px 10px;font:inherit;font-size:.9em;
  color:inherit;background:transparent;border:1px solid var(--line,#d7d3c8);border-radius:3px}
.comp-sheet .rfilt:focus{outline:none;border-color:currentColor}
.comp-sheet .rcount{font-size:.82em;color:var(--muted,#8b8f98);font-variant-numeric:tabular-nums}

/* Habilidades y especializaciones del oficio */
.comp-sheet .habs{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
.comp-sheet .hab{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:4px 8px}
.comp-sheet .habn{font-weight:600}
.comp-sheet .habd{font-size:.88em;line-height:1.4;color:var(--muted,#8b8f98)}
@media (max-width:560px){.comp-sheet .hab{grid-template-columns:auto 1fr}
  .comp-sheet .habd{grid-column:1/-1}}

/* Cabecera de rango dentro de la tabla de recetas */
.comp-sheet tr.rankrow>td{padding:12px 0 4px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;font-size:.78em;border-bottom:1px solid var(--line,#d7d3c8)}
.comp-sheet .rankn{float:right;font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--muted,#8b8f98);font-variant-numeric:tabular-nums}

/* De donde se aprende la receta */
.comp-sheet td.src{white-space:nowrap}
.comp-sheet .tag{display:inline-block;font-size:.74em;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 6px;border:1px solid currentColor;border-radius:2px;opacity:.75}
.comp-sheet .tag.ent{color:#3fa63f}
.comp-sheet .tag.rec{color:#a08600}
.comp-sheet .coste{display:block;font-size:.78em;color:var(--muted,#8b8f98);
  font-variant-numeric:tabular-nums;margin-top:2px}

/* Herramientas que exige la receta */
.comp-sheet .rtools{margin-top:2px;font-size:.8em;color:var(--muted,#8b8f98)}
.comp-sheet .rtools::before{content:"Herramientas: ";opacity:.7}

/* Reinos y etnias de una raza: los siete humanos. Tarjeta corta con su icono, el fisico
   y la lista de nombres, que en prosa seguida no se distinguian unos de otros. */
.comp-sheet .etnias{display:grid;gap:10px;margin:6px 0 2px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.comp-sheet .etnia{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 12px;
  border:1px solid rgba(111,168,208,.22);border-radius:6px;
  background:rgba(111,168,208,.05)}
.comp-sheet .eticon{width:34px;height:34px;border-radius:4px;flex:0 0 auto}
.comp-sheet .etname{font-family:var(--display);font-weight:700;font-size:1rem;
  color:var(--harford-blue-light,#6fa8d0);margin-bottom:2px}
.comp-sheet .etdesc p{margin:0 0 4px;font-size:.9em;line-height:1.45}
.comp-sheet .etnom{font-size:.85em;line-height:1.4;color:var(--muted,#8b8f98)}
.comp-sheet .etnom p{margin:0;display:inline}
.comp-sheet .etnomk{font-weight:600;color:var(--harford-blue-light,#6fa8d0);
  letter-spacing:.04em;text-transform:uppercase;font-size:.82em;margin-right:6px}

/* Ilustracion del trasfondo: FONDO del panel, no bloque de contenido. Anclada arriba,
   palida y desvanecida hacia abajo. El panel es fijo y solo scrollea `.body`, asi que la
   imagen se queda quieta detras: es lo que la hace leerse como atmosfera y no como
   cabecera. Opacidad y alto en variables para poder graduarlo sin tocar el selector. */
.comp-sheet{--arte-alto:min(72vh,760px)}
/* Alto de la ilustracion, calculado UNA vez: la proporcion del arte (3:2) aplicada al ancho
   del panel, con tope. De aqui cuelga tambien donde empieza el texto, para que las dos
   cosas no puedan descuadrarse. Va en `.body` porque un elemento no es su propio contenedor
   de consulta y dentro de `.comp-sheet` las unidades `cq` no medirian el panel. */
.comp-sheet .body{--arte-h:min(calc(100cqw / 1.5),var(--arte-alto))}
/* Cuelga de `.body`, que es lo unico que scrollea: asi la ilustracion se va con el
   contenido al bajar en vez de quedarse clavada en pantalla. `z-index:-1` la manda detras
   del texto (los parrafos no estan posicionados y el fondo si, y lo posicionado pinta
   encima); no se escapa detras del panel porque `.body` ya crea contexto de apilamiento. */
.comp-sheet.con-arte .body::before{content:"";position:absolute;left:0;right:0;top:0;
  z-index:-1;
  /* El alto lo marca la proporcion del arte (3:2, la de las 49), no un valor fijo: asi al
     ensanchar el panel con el tirador la ilustracion se EXPANDE en vez de recortarse mas.
     Dos capas: el velo encima, la ilustracion debajo. Bajarle la opacidad a la imagen la
     hacia desaparecer contra el azul del panel; asi se reconoce y el texto se lee. */
  width:100%;height:var(--arte-h);
  background-image:var(--arte,none);
  background-size:cover;background-position:center 30%;
  background-repeat:no-repeat;pointer-events:none;
  /* la capa entera se desvanece: lo que queda debajo es el panel, con el tono que tenga a
     esa altura. Cerrar el velo en un color fijo dejaba un canto visible. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 96%)}
/* Con ilustracion, el cuerpo abre con aire para que se vea el dibujo antes de la primera
   linea. Va en PORCENTAJE del ancho, no en pixeles: el fondo mide ancho/1,5, asi que un
   valor fijo se quedaba corto al ensanchar el panel y sobraba al estrecharlo. El tope
   sigue al mismo alto maximo que el fondo. */
/* El texto arranca donde acaba la ilustracion. `--arte-inicio` es el unico mando: 1 la
   deja justo debajo, menos de 1 la monta sobre su ultimo tramo, mas de 1 deja aire. */
.comp-sheet.con-arte .body{padding-top:calc(var(--arte-h) * var(--arte-inicio,1))}
/* el contenido va por encima del fondo */
.comp-sheet header,.comp-sheet .body{position:relative;z-index:1}

/* Una variante es un trasfondo contado en corto, y su dibujo recibe el mismo trato que el
   de la ficha: fondo de la tarjeta, palido, en vez de miniatura a un lado. Asi las dos
   ilustraciones se leen igual y el texto ocupa el ancho entero. */
.comp-sheet .variantes{display:grid;gap:12px;margin:6px 0 2px}
.comp-sheet .variante{position:relative;overflow:hidden;
  border:1px solid rgba(111,168,208,.22);border-radius:6px;
  background:rgba(111,168,208,.05);padding:12px 14px}
.comp-sheet .variante::before{content:"";position:absolute;inset:0;
  /* mismo recurso que la ficha: imagen entera con velo encima */
  background-image:linear-gradient(to bottom,
      rgba(6,22,37,.68) 0%, rgba(6,22,37,.86) 55%, rgba(5,15,26,.94) 100%),
    var(--varte,none);
  background-size:cover,cover;background-position:center,center 13%;
  background-repeat:no-repeat,no-repeat;filter:saturate(.9);pointer-events:none}
.comp-sheet .varbody{position:relative;z-index:1}
.comp-sheet .varname{display:flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:700;font-size:1rem;
  color:var(--harford-blue-light,#6fa8d0);margin-bottom:4px}
.comp-sheet .varicon{width:24px;height:24px;border-radius:4px;flex:0 0 auto}
.comp-sheet .varbody p{margin:0 0 6px;font-size:.92em;line-height:1.5}
@media (max-width:620px){.comp-sheet .variante{grid-template-columns:1fr}}

/* Icono de los conjuros de una especializacion, del frame "Magia <X>" de los perfiles
   TRP3. Va en la cabecera de su seccion, no junto al nombre de la especializacion: es el
   dibujo de sus CONJUROS, que es otra cosa que la especializacion en si. */
.comp-sheet .sec-h .shicon{width:18px;height:18px;border-radius:3px;
  vertical-align:-4px;margin-right:7px}