/* ==========================================================================
   ENZOMYCOTA · HERBARIO DE SETAS BASIDIOMICETAS
   Estética editorial naturalista de larga duración (inspirada en cuadernos de
   herbario, guías de campo clásicas y láminas coleccionables listas para A4).
   ========================================================================== */

:root {
  /* Papel y superficies táctiles */
  --bg: #f1ebe0;
  --bg-2: #e7dfd0;
  --card: #faf6ee;
  --card-2: #f2ecdf;
  --paper-card: #f8f3e7;
  --paper-card-2: #efe7d6;
  --forest-dark: #17231a;
  --forest-mid: #213225;
  --forest-soft: #2c4231;
  --gold-accent: #d8be8c;
  --gold-soft: rgba(216, 190, 140, 0.22);

  /* Tinta y jerarquía de texto */
  --ink: #1b1814;
  --ink-2: #433c33;
  --muted: #6e6558;
  --line: #d6cbb8;
  --line-2: #bfb199;
  --card-border: #332b22;

  /* Acentos botánicos y semánticos */
  --accent: #284b31;
  --accent-2: #1d3824;
  --accent-soft: #dfe9dd;
  --terra: #a84a22;          /* 4,8:1 sobre el papel (antes #b85328, 4,1:1) */
  --terra-dark: #8f3d1b;
  --terra-soft: #f6e4db;
  --ai: #6d4c30;
  --ai-soft: #f2e8dc;
  --ok: #265934;
  --ok-bg: #e1efe4;
  --warn: #945914;
  --warn-bg: #f8ecd7;
  --danger: #9e2a25;
  --danger-bg: #f8e2e0;

  /* Pictogramas (web/js/picto.js): sombrero, láminas y pie en tonos de seta, contorno sepia en vez de negro */
  --cap: #c08552;
  --gill: #f3e3c3;
  --stem: #fbf5e8;
  --ground: #8f8270;
  --wood: #a9825b;
  --green: #6e9a4a;
  --picto-ink: #3d3127;

  /* Tipografía */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometría y sombras */
  --r: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 2px 6px rgba(27, 24, 20, 0.05), 0 1px 2px rgba(27, 24, 20, 0.04);
  --shadow: 0 10px 28px rgba(27, 24, 20, 0.08), 0 2px 6px rgba(27, 24, 20, 0.05);
  --shadow-card: 0 8px 22px rgba(27, 24, 20, 0.10), 0 2px 5px rgba(27, 24, 20, 0.06);
  --maxw: 1400px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(40, 75, 49, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, #f4efe4 0%, #efe8d9 100%);
  background-size: 24px 24px, 100% 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--terra);
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.45rem;
  color: var(--ink);
}

h1 { font-size: clamp(1.65rem, 2.6vw, 2.35rem); }
h2 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 0.75rem; }

.latin, em {
  font-family: var(--serif);
  font-style: italic;
}

.mono {
  font-family: var(--mono);
}

.muted { color: var(--muted); }
.small { font-size: 0.84rem; }
.danger { color: var(--danger); }
.ok-t { color: var(--ok); }
.center { text-align: center; }
.spacer { flex: 1; }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.only-print { display: none; }

.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(40, 75, 49, 0.22);
  padding: 0.2rem 0.58rem;
  border-radius: 999px;
  margin-bottom: 0.45rem;
}

/* ==========================================================================
   ICONOS Y PICTOGRAMAS
   ========================================================================== */

.ico {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.ico.big {
  width: 2.2rem;
  height: 2.2rem;
  stroke-width: 1.5;
}

.picto {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  --ink: var(--picto-ink);
}
.picto.xs {
  width: 0.95rem;
  height: 0.95rem;
}

/* ==========================================================================
   CABECERA EDITORIAL EN VERDE BOSQUE PROFUNDO
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.35rem;
  background: var(--forest-dark);
  color: #f4efe4;
  border-bottom: 1px solid rgba(216, 190, 140, 0.22);
  box-shadow: 0 4px 20px rgba(15, 23, 17, 0.18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #f7f2e7;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover {
  color: #fff;
}

.logo {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 10px;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}
.brand-text b {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #faf6ee;
}
.brand-text small {
  font-size: 0.68rem;
  color: var(--gold-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.44rem 0.78rem;
  border-radius: 8px;
  color: rgba(244, 239, 228, 0.76);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.tabs a svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabs a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.tabs a.on {
  color: #17231a;
  background: #f3ede0;
  border-color: var(--gold-accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.tabs a b {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.06rem 0.38rem;
  border-radius: 999px;
  background: var(--terra);
  color: #fff;
}
.tabs a b:empty {
  display: none;
}

.btn.newfind {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
}
.btn.newfind:hover {
  background: var(--terra-dark);
  border-color: var(--terra);
  color: #fff;
}
.btn.newfind svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   BOTONES Y CONTROLES GENERALES
   ========================================================================== */

.btn, .tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.52rem 0.95rem;
  border-radius: 9px;
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent-2);
  box-shadow: 0 1px 3px rgba(17, 32, 20, 0.16);
}
.btn:hover:not(:disabled) {
  background: var(--accent-2);
  color: #fff;
  transform: translateY(-1px);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn.big {
  padding: 0.72rem 1.3rem;
  font-size: 0.95rem;
  border-radius: 10px;
}
.btn.sm, .tool.sm {
  padding: 0.36rem 0.68rem;
  font-size: 0.79rem;
  border-radius: 7px;
}
.btn.ghost {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--bg-2);
  border-color: var(--ink-2);
}
.btn.ghost.on {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: rgba(38, 89, 52, 0.4);
}
.btn.wide {
  width: 100%;
}

.tool {
  background: var(--card);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.tool:hover:not(:disabled) {
  background: var(--bg-2);
  color: var(--ink);
  border-color: var(--line-2);
}
.tool.on {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.tool.danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #dfa39f;
}
.tool.icon {
  padding: 0.44rem;
}

.link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.1rem 0.2rem;
}
.link:hover {
  color: var(--terra);
}

.seg {
  display: inline-flex;
  background: var(--bg-2);
  padding: 0.2rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  gap: 0.15rem;
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.34rem 0.68rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: all 0.12s ease;
}
.seg button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.seg.sm button {
  padding: 0.26rem 0.55rem;
  font-size: 0.76rem;
}
.seg.xs button {
  padding: 0.16rem 0.45rem;
  font-size: 0.72rem;
}

/* ==========================================================================
   CONTENEDOR PRINCIPAL Y PIE DE PÁGINA
   ========================================================================== */

#main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.35rem 3.5rem;
}

body.xp-page #main {
  max-width: 1600px;
  padding-top: 1rem;
}

.foot {
  margin-top: auto;
  background: var(--forest-dark);
  color: rgba(244, 239, 228, 0.78);
  border-top: 1px solid rgba(216, 190, 140, 0.2);
  padding: 2rem 1.35rem;
  font-size: 0.82rem;
}
.foot-in {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}
.foot-brand {
  max-width: 480px;
}
.foot-brand b {
  font-family: var(--serif);
  font-size: 1rem;
  color: #faf6ee;
  display: block;
  margin-bottom: 0.3rem;
}
.foot-brand p {
  margin: 0;
  color: rgba(244, 239, 228, 0.68);
}
.foot-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 540px;
  text-align: right;
}
.foot-meta a {
  color: var(--gold-accent);
  text-decoration: underline;
}
.foot-warn {
  color: #f0b998;
  font-weight: 500;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem;
  box-shadow: var(--shadow-sm);
}

.section-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

/* ==========================================================================
   CARTAS MICOLÓGICAS DE CAMPO (.tc) — DISEÑO DE HERBARIO & COLECCIÓN
   Proporción estándar 63 × 88 mm, con doble filete botánico, sello de catálogo,
   10 rasgos diagnósticos con texto + icono, fenología y reverso de autor.
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.tc {
  --c1: #eae3d4;
  --c2: #675e4f;
  position: relative;
  aspect-ratio: 63 / 88;
  width: 100%;
  background: var(--paper-card);
  border: 1.5px solid var(--card-border);
  border-radius: 11px;
  box-shadow:
    inset 0 0 0 3px var(--paper-card),
    inset 0 0 0 3.8px rgba(67, 56, 42, 0.24),
    var(--shadow-card);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
}

.tc:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 3px var(--paper-card),
    inset 0 0 0 3.8px rgba(67, 56, 42, 0.35),
    0 14px 30px rgba(27, 24, 20, 0.14);
}

.tc.tc-lg {
  max-width: 356px;
  margin: 0 auto;
}

.tc.mine {
  border-color: #26422c;
  box-shadow:
    inset 0 0 0 3px var(--paper-card),
    inset 0 0 0 4px rgba(38, 66, 44, 0.32),
    var(--shadow-card);
}

.tc.near {
  opacity: 0.88;
}

.tc-face, .tc-back {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.56rem 0.6rem 0.46rem;
  gap: 0.32rem;
  min-height: 0;
  background:
    linear-gradient(180deg, var(--c1) 0%, rgba(248, 243, 231, 0.94) 24%, var(--paper-card) 100%);
}

/* Cabecera de la carta */
.tc-h {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding-bottom: 0.28rem;
  border-bottom: 1.5px solid var(--c2);
  min-height: 2.35rem;
}

.tc-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.tc-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c2);
  line-height: 1.1;
}
.tc-kicker b {
  font-weight: 700;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-name {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.12;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc.mine .tc-name:not(.latin) {
  font-style: normal;
}
.tc-lg .tc-name {
  font-size: 1.06rem;
}

.tc-strip {
  font-size: 0.65rem;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.18;
}

.tc-hp {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(51, 43, 34, 0.24);
  border-radius: 5px;
  padding: 0.14rem 0.34rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.tc-hp small {
  font-size: 0.54rem;
  color: var(--muted);
}
.tc-hp.edit:hover {
  border-color: var(--accent);
  background: #fff;
}

.tc-type {
  width: 1.68rem;
  height: 1.68rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1.2px solid var(--c2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
  margin-top: 0.1rem;
}
.tc-type .picto {
  width: 1.08rem;
  height: 1.08rem;
}

/* Marco fotográfico de la lámina */
.tc-art {
  position: relative;
  flex: 1 1 37%;
  min-height: 108px;
  background: #e5decb;
  border: 1px solid rgba(51, 43, 34, 0.35);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.tc-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tc-art.empty {
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem;
  text-align: center;
  border: 1.5px dashed var(--accent);
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
}
.tc-art.empty:hover {
  background: rgba(223, 233, 221, 0.45);
}
.tc-drop-ring {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.15rem;
}

.tc-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
}
.tc-noimg .picto {
  width: 2.6rem;
  height: 2.6rem;
  opacity: 0.45;
}
.tc-noimg small {
  font-size: 0.65rem;
}

/* Miniaturas adicionales dentro del marco fotográfico (vistas de himenio/pie) */
.tc-insets {
  position: absolute;
  left: 0.32rem;
  bottom: 0.32rem;
  display: flex;
  gap: 0.22rem;
  z-index: 2;
}
.tc-insets img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: cover;
  border-radius: 4px;
  border: 1.5px solid #faf6ee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Muestras de color del sombrero sobre la imagen */
.tc-pal {
  position: absolute;
  right: 0.32rem;
  bottom: 0.32rem;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: rgba(250, 246, 238, 0.92);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.tc-pal i {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  display: inline-block;
}
.tc-pal i.q {
  width: auto;
  height: auto;
  border: none;
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0 0.25rem;
  color: var(--accent);
}

/* Porcentaje de similitud */
.tc-art .ring {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  min-width: 2.05rem;
  height: 1.55rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(23, 35, 26, 0.9);
  border: 1.5px solid var(--gold-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: #faf6ee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.tc-tag, .gemb, .tc-why {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  background: rgba(250, 246, 238, 0.94);
  color: var(--ink);
  border: 1px solid rgba(43, 38, 32, 0.25);
  padding: 0.12rem 0.42rem;
  border-radius: 5px;
  font-size: 0.63rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}
.tc-tag.ok {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}
.tc-why {
  top: auto;
  bottom: 0.32rem;
  left: 0.32rem;
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(158, 42, 37, 0.35);
  max-width: 72%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tabla de 10 rasgos diagnósticos (2 columnas × 5 filas) */
.tc-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: rgba(67, 56, 42, 0.16);
  border: 1px solid rgba(67, 56, 42, 0.26);
  border-radius: 6px;
  overflow: hidden;
}

.tc-sl {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.15rem 0.32rem;
  background: rgba(252, 249, 242, 0.94);
  min-width: 0;
  text-align: left;
  transition: background 0.12s ease;
}
button.tc-sl:hover {
  background: #fff;
}
.tc-sl.set {
  background: #fdfbf6;
}
.tc-sl.ghost {
  opacity: 0.56;
  background: rgba(244, 239, 228, 0.65);
}

/* Estados de comparación en cada casilla de rasgo */
.tc-sl.ok {
  background: var(--ok-bg);
}
.tc-sl.ok .sl-v {
  color: var(--ok);
}
.tc-sl.no {
  background: var(--danger-bg);
}
.tc-sl.no .sl-v {
  color: var(--danger);
}
.tc-sl.diff {
  background: var(--warn-bg);
}
.tc-sl.diff .sl-v {
  color: var(--warn);
}
.tc-sl.ai {
  background: var(--ai-soft);
}

.sl-ic {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-2);
}
.sl-ic .picto {
  width: 1rem;
  height: 1rem;
}

.sl-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.04;
}
.sl-k {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.sl-v {
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barra de fenología mensual (E F M A M J J A S O N D) */
.tc-mo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.34rem;
  background: rgba(235, 227, 211, 0.6);
  border: 1px solid rgba(67, 56, 42, 0.2);
  border-radius: 5px;
}
.mo-lbl {
  font-family: var(--mono);
  font-size: 0.49rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
}
.mo-bars {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  align-items: end;
}
.mo-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.mo-c i {
  display: block;
  width: 100%;
  height: 9px;
  background: rgba(67, 56, 42, 0.12);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.mo-c i::after {
  content: '';
  position: absolute;
  inset: calc((1 - var(--h, 0.1)) * 100%) 0 0 0;
  background: var(--c2);
  opacity: 0.72;
}
.mo-c.peak i::after {
  background: var(--accent);
  opacity: 1;
}
.mo-c.mark i::after, .mo-c.now i::after {
  background: var(--terra);
  opacity: 1;
}
.mo-c small {
  font-family: var(--mono);
  font-size: 0.45rem;
  line-height: 1;
  color: var(--muted);
  font-weight: 600;
}
.mo-c.peak small, .mo-c.mark small {
  color: var(--ink);
  font-weight: 700;
}

/* Pie de la carta */
.tc-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding-top: 0.14rem;
  border-top: 1px solid rgba(67, 56, 42, 0.2);
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--muted);
}
.tc-rar {
  font-weight: 600;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-rar b {
  color: var(--c2);
}
.tc-sp {
  color: var(--ink-2);
  white-space: nowrap;
}
.tc-no {
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* Botones flotantes en las cartas del mosaico (Imprimir y Comparar) */
.tc-acts {
  position: absolute;
  top: 2.85rem;
  right: 0.92rem;
  display: flex;
  gap: 0.25rem;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tc:hover .tc-acts, .tc-acts:has(.on) {
  opacity: 1;
}
.prtb, .cmpb {
  width: 1.72rem;
  height: 1.72rem;
  border-radius: 6px;
  background: rgba(250, 246, 238, 0.94);
  border: 1px solid rgba(43, 38, 32, 0.3);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.prtb:hover, .cmpb:hover {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
}
.prtb.on, .cmpb.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ==========================================================================
   REVERSO DE LA CARTA (.tc-back) — ETIQUETA DE HERBARIO Y NOTAS DE CAMPO
   ========================================================================== */

.tc-back {
  justify-content: space-between;
  gap: 0.32rem;
}

.tb-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  padding-bottom: 0.28rem;
  border-bottom: 1.5px solid var(--c2);
}
.tb-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tb-kicker {
  font-family: var(--mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c2);
  font-weight: 700;
}
.tb-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.14;
  color: var(--ink);
}
.tb-cn {
  font-size: 0.68rem;
  color: var(--ink-2);
  font-weight: 600;
}
.tb-no {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(51, 43, 34, 0.22);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.tb-desc {
  font-size: 0.65rem;
  line-height: 1.34;
  color: var(--ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tb-m {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.22rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(51, 43, 34, 0.2);
  border-radius: 6px;
  padding: 0.26rem 0.38rem;
}
.tb-mi {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}
.tb-mi small {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.tb-mi b {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--ink);
}

.tb-sec, .tb-extra, .tb-where {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(51, 43, 34, 0.2);
  border-radius: 6px;
  padding: 0.28rem 0.4rem;
}

.tb-sec-t {
  font-family: var(--mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c2);
  font-weight: 700;
  margin-bottom: 0.18rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Cuadrícula de localización y coordenadas en el reverso de tu carta */
.tb-loc-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 0.2rem 0.4rem;
}
.tb-loc-item {
  display: flex;
  flex-direction: column;
  line-height: 1.14;
  min-width: 0;
}
.tb-loc-item.wide {
  grid-column: 1 / -1;
  padding-top: 0.14rem;
  border-top: 1px dashed rgba(51, 43, 34, 0.18);
}
.tb-loc-item small {
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.tb-loc-item b {
  font-size: 0.62rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-map-row {
  margin-top: 0.22rem;
}
.tb-map-row .tmap {
  max-height: 54px;
}

/* Notas de campo en el reverso (con pauta de cuaderno) */
.tb-notes-sec {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 64px;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 15px,
    rgba(67, 56, 42, 0.1) 15px,
    rgba(67, 56, 42, 0.1) 16px
  );
}
.tb-notes-ed {
  width: 100%;
  flex: 1;
  border: 1px dashed rgba(40, 75, 49, 0.35);
  border-radius: 4px;
  padding: 0.25rem 0.35rem;
  font-size: 0.66rem;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.82);
  resize: none;
}
.tb-notes-print {
  font-size: 0.64rem;
  line-height: 1.35;
  color: var(--ink);
  overflow: hidden;
}

.tb-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.24rem;
}
.tb-photos figure {
  margin: 0;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(51, 43, 34, 0.25);
}
.tb-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.16rem 0.4rem;
}
.tb-tr-i {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  font-size: 0.58rem;
  line-height: 1.2;
  border-bottom: 1px dotted rgba(67, 56, 42, 0.18);
  padding-bottom: 1px;
}
.tb-tr-i small {
  color: var(--muted);
  font-size: 0.54rem;
}
.tb-tr-i span {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-where {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.tb-map {
  width: 36%;
  flex-shrink: 0;
}
.tb-wi {
  flex: 1;
  min-width: 0;
}

.tb-f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.16rem;
  border-top: 1px solid rgba(67, 56, 42, 0.2);
  font-family: var(--mono);
  font-size: 0.51rem;
  color: var(--muted);
}

/* Giro 3D limpio entre anverso y reverso */
.flip {
  perspective: 1200px;
  width: 100%;
  max-width: 356px;
  margin: 0 auto;
}
.flip-in {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.flip.on .flip-in {
  transform: rotateY(180deg);
}
.flip-f, .flip-b {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-b {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

/* Vista de ambas caras lado a lado (Anverso + Reverso simultáneos) */
.wb-both {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 340px));
  gap: 1rem;
  justify-content: center;
  align-items: start;
}
.wb-face-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wb-col-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* Colección de tus cartas de campo */
.lib-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.fc-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fc-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.fc-meta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fc-pill {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fc-pill.ok {
  color: var(--ok);
}
.fc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.fc-tag {
  font-size: 0.7rem;
  padding: 0.12rem 0.42rem;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.fc-tag.warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: rgba(148, 89, 20, 0.3);
}
.fc-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   MESA DE CAMPO: CREAR Y EDITAR CARTA (#/nuevo y #/hallazgo/<id>)
   ========================================================================== */

.cp-head, .fh-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.crumb, .crumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.cp2-grid, .fw2 {
  display: grid;
  grid-template-columns: 365px 1fr;
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 2rem;
}
.cp2-grid.wide-stage, .fw2.wide-stage {
  grid-template-columns: 1fr;
}

.cp2-card, .fw2-card {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.wide-stage .cp2-card, .wide-stage .fw2-card {
  position: static;
}

.wb-side-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
}
.wb-side-lbl {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
}

.cp2-side, .fw2-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wb-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wb-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.wb-sec-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.wb-sec-head > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wb-help {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-2);
  background: var(--bg);
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

.cp2-n {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.cp2-n.now {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cp2-n.done {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok);
}

.cp2-ths, .fw2-ths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.cp2-ths figure, .fw2-ths button, .fh-add {
  margin: 0;
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--card);
}
.cp2-ths figure.on {
  border-color: var(--accent);
}
.cp2-ths img, .fw2-ths img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp2-ths .x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp2-add, .fh-add {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0 0.75rem;
  min-width: 3.6rem;
  height: 3.6rem;
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.cp2-add:hover, .fh-add:hover {
  background: var(--accent-soft);
}

.fld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fld > span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.fld input, .fld textarea {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  font-size: 0.88rem;
}
.fld input:focus, .fld textarea:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.fld-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.fld-coords {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem;
  background: var(--bg);
  padding: 0.65rem 0.75rem;
  border-radius: 9px;
  border: 1px solid var(--line);
}
.fld-coords .fld {
  flex: 1 1 120px;
}
.fld-coords input {
  font-family: var(--mono);
  font-size: 0.82rem;
}
.geo-btn {
  height: 2.25rem;
}

/* Etiquetas rápidas para añadir notas detrás de la carta */
.note-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.32rem;
}
.ntag {
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: all 0.12s ease;
}
.ntag:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.wb-go-panel {
  background: linear-gradient(135deg, #f7f2e6 0%, #ede4d1 100%);
  border-color: var(--line-2);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.wb-go-info {
  flex: 1 1 260px;
}
.cp2-go {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.fh-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-bottom: 1.5px dashed var(--line-2);
  background: transparent;
  padding: 0.15rem 0.25rem;
  width: 100%;
  border-radius: 4px;
}
.fh-title:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

.fh-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.fstatus.identified {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 600;
  font-size: 0.86rem;
}

.fh-sum {
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0;
}

.fh-toxic {
  padding: 0.6rem 0.85rem;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(158, 42, 37, 0.3);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0;
}

.fw2-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.83rem;
  color: var(--ink-2);
  margin: 0;
}

.fh-block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.8rem 0.95rem;
}
.fh-bh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.fh-bh h3 { margin: 0; }

.kchips, .achips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.kchip, .achip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line-2);
  font-size: 0.78rem;
  font-weight: 600;
}
.achip.mine {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}
.kchip small, .achip small {
  color: var(--muted);
  font-weight: 500;
}
.kchip button, .achip .rm {
  color: var(--muted);
  margin-left: 0.15rem;
}

/* Candidatas y preguntas diagnósticas */
.fsec, .fsec2 {
  margin-top: 2.25rem;
}
.sec-h, .fsec-h {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.sec-h h2, .fsec-h h2 {
  margin: 0;
}

.la2 {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.la2.chosen .tc {
  outline: 3px solid var(--ok);
}
.la-bars {
  display: flex;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.72rem;
}
.lb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.lb i {
  flex: 1;
  height: 5px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.lb b {
  display: block;
  height: 100%;
  background: var(--accent);
}
.lb em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.68rem;
  color: var(--muted);
}

.la-season {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.74rem;
}
.la-season .mchart {
  margin-left: auto;
  width: 90px;
}

.la-act {
  display: flex;
  gap: 0.35rem;
}
.la-act .btn {
  flex: 1;
}

.la-why {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.4rem 0.6rem;
  font-size: 0.76rem;
}
.la-why summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-2);
}
.la-x {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.la-x li {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  color: var(--danger);
}
.la-ok {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.la-ok > span {
  background: var(--ok-bg);
  color: var(--ok);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.qgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.qcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.85rem;
}
.qq {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.5rem;
}
.qopts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
.qopt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  text-align: left;
  font-size: 0.82rem;
}
.qopt:hover {
  border-color: var(--accent);
  background: var(--card);
}
.qopt b { flex: 1; }
.qthumbs {
  display: inline-flex;
  gap: 2px;
}
.sp-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
}
.sp-thumb.xs {
  width: 1.25rem;
  height: 1.25rem;
}

/* Lo que vio Gemini en tus fotos: una fila por rasgo (icono, rasgo, valor, seguridad, ✓ y ✕), en dos columnas */
.gm { margin: 1.1rem 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .9rem 1rem .75rem; box-shadow: var(--shadow-sm); }
.gm-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); column-gap: 30px; }
.gm-row { display: grid; grid-template-columns: 26px minmax(0, 190px) minmax(0, 1fr) 10px 30px 30px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(214, 203, 184, .6); font-size: .88rem; }
.gm-ic { display: grid; place-items: center; }
.gm-ic .picto { width: 26px; height: 26px; }
.gm-ic .sw1 { width: 20px; height: 20px; }
.gm-l { color: var(--muted); font-size: .8rem; }
.gm-v { font-weight: 600; }
.gm-b { width: 28px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); display: grid; place-items: center; }
.gm-b .ico { width: 15px; height: 15px; }
.gm-b.ok:hover { border-color: var(--accent); color: var(--accent); }
.gm-b.no:hover { border-color: var(--danger); color: var(--danger); }
.gm-row.yes { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.gm-row.yes .gm-b.ok { background: var(--accent); border-color: var(--accent); color: #fff; }
.gm-row.no .gm-v, .gm-row.no .gm-l { text-decoration: line-through; opacity: .55; }
.gm-row.no .gm-b.no { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (max-width: 760px) {
  .gm-rows { grid-template-columns: minmax(0, 1fr); }
  .gm-row { grid-template-columns: 24px minmax(0, 1fr) 10px 30px 30px; }
  .gm-l { display: none; }
}

/* ==========================================================================
   SELECTOR EMERGENTE DE RASGOS DE LA CARTA (.tc-pk)
   ========================================================================== */

.tc-pk {
  position: fixed;
  z-index: 90;
  width: min(350px, calc(100vw - 20px));
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(27, 24, 20, 0.24);
  padding: 0.8rem;
}
.tc-pk.sheet {
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  top: auto !important;
  width: auto;
}
.pk-h {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.pk-h b { flex: 1; font-size: 0.92rem; }
.pk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  max-height: 270px;
  overflow-y: auto;
}
.pk-grid.colors {
  grid-template-columns: repeat(3, 1fr);
}
.pk-o {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.55rem;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  text-align: left;
  font-size: 0.78rem;
}
.pk-o:hover {
  border-color: var(--accent);
  background: #fff;
}
.pk-o.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.pk-sw {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
}
.pk-f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
}

/* ==========================================================================
   EXPLORADOR POR CLAVE SINÓPTICA (#/explorar)
   ========================================================================== */

.xp {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.xp-rail {
  position: sticky;
  top: 4.3rem;
  max-height: calc(100vh - 5.2rem);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rail-top {
  padding: 0.85rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--card-2);
}
.rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rail-title h2 {
  font-size: 1.1rem;
  margin: 0;
}
.rail-tools {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rail-tools input, .rail-tools select {
  width: 100%;
  padding: 0.44rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--card);
  font-size: 0.83rem;
}

.rail-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.55rem;
}

details.sec {
  border-bottom: 1px solid var(--line);
}
details.sec summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.45rem;
  font-weight: 600;
  font-size: 0.87rem;
  cursor: pointer;
  list-style: none;
}
details.sec summary::-webkit-details-marker { display: none; }
details.sec summary em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.72rem;
  background: var(--accent);
  color: #fff;
  padding: 0.05rem 0.42rem;
  border-radius: 999px;
}

.sec-body {
  padding: 0.25rem 0.35rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cblock {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem;
}
.cblock.sel {
  border-color: var(--accent);
  background: #f5f8f4;
}
.cb-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.81rem;
  margin-bottom: 0.4rem;
}
.cb-head b { flex: 1; }
.tipb {
  font-size: 0.66rem;
  background: var(--warn-bg);
  color: var(--warn);
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  font-weight: 600;
}

.opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
}
.opts.colors {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.opt {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.32rem 0.45rem;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  text-align: left;
  min-width: 0;
}
.opt:hover {
  border-color: var(--line-2);
}
.opt.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.opt.zero:not(.on) {
  opacity: 0.38;
}
.opt span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opt small {
  font-family: var(--mono);
  font-size: 0.65rem;
  opacity: 0.75;
}
.opt.color i {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.xp-head {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  margin-bottom: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: var(--shadow-sm);
}
.xp-count {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}
.xp-count .big {
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.xp-count .lbl {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}
.xp-count .lbl small {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.81rem;
}

.sbar {
  height: 7px;
  background: var(--bg-2);
  border-radius: 999px;
  display: flex;
  overflow: hidden;
}
.sbar .ok { background: var(--ok); }
.sbar .unk { background: #a89f8d; }
.sbar .near { background: var(--warn); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.76rem;
  color: var(--ink-2);
}
.legend i {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.legend i.ok { background: var(--ok); }
.legend i.unk { background: #a89f8d; }
.legend i.near { background: var(--warn); }

.xp-ctrl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.xp-ctrl select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--bg);
  font-size: 0.8rem;
}

.nexttip {
  text-align: left;
  padding: 0.48rem 0.75rem;
  border-radius: 8px;
  background: var(--warn-bg);
  border: 1px solid rgba(148, 89, 20, 0.25);
  color: var(--ink);
  font-size: 0.82rem;
}

/* ==========================================================================
   FICHA DE ESPECIE (#/especie/<id>) Y COMPARADOR (#/comparar)
   ========================================================================== */

.sp2 {
  display: grid;
  grid-template-columns: 356px 1fr;
  gap: 1.85rem;
  align-items: start;
}
.sp2-card {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.sp2-act {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.sp2-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cn-main {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink-2);
  margin-top: -0.35rem;
}
.cn-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.cn-more small {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.68rem;
  margin-right: 0.2rem;
}
.syn {
  font-size: 0.84rem;
  color: var(--muted);
}
.taxo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ink-2);
  text-decoration: none;
}

.sp2-ph {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sp2-ph button {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 0;
}
.sp2-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kv {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 0.38rem 0.85rem;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.9rem 1.05rem;
  font-size: 0.86rem;
}
.kv dt {
  color: var(--muted);
  font-weight: 500;
}
.kv dd {
  margin: 0;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.cchip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 500;
}
.cchip i {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
}

.mchart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  height: 48px;
  align-items: end;
  padding: 0.25rem 0;
}
.mchart.sm {
  height: 28px;
  gap: 2px;
}
.mchart span {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 2px;
}
.mchart i {
  width: 100%;
  height: calc(var(--h, 0.05) * 100%);
  min-height: 2px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.75;
}
.mchart span.now i, .mchart span.mark i {
  background: var(--terra);
  opacity: 1;
}
.mchart small {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--muted);
}

/* Comparador de cartas (#/comparar) */
.cv-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cv-sum {
  font-size: 0.95rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.75rem 1rem;
}
.cv-head {
  display: grid;
  grid-template-columns: 180px repeat(var(--n, 2), minmax(230px, 1fr));
  gap: 0.9rem;
  align-items: start;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.cv-c {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.cv-ca {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}
.cv-leg {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.78rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.75rem;
}
.cv-leg i {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 3px;
  margin-right: 0.35rem;
}
.lg-ok { background: var(--ok); }
.lg-no { background: var(--danger); }
.lg-unk { background: var(--line-2); }
.lg-diff { background: var(--warn); }

.cv-strip {
  display: none;
}

.cv-sec {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}
.cv-row, .cv-mrow {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.cv-lab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
}
.cv-cells {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(160px, 1fr));
  gap: 0.65rem;
}
.cv-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  border-radius: 6px;
  font-size: 0.8rem;
}
.cv-cell.ok { background: var(--ok-bg); }
.cv-cell.no { background: var(--danger-bg); }
.cv-st {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.cv-sw i {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
}

.cv-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.25rem 0;
}
.cv-bar {
  position: relative;
  height: 16px;
  background: var(--bg);
  border-radius: 4px;
}
.cv-bar i.rng {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: var(--c, var(--accent));
  border-radius: 3px;
}
.cv-bar i.ext {
  position: absolute;
  top: 6px;
  bottom: 6px;
  background: var(--c, var(--accent));
  opacity: 0.3;
  border-radius: 2px;
}
.cv-bar small {
  position: absolute;
  top: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
}
.cv-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
}

/* ==========================================================================
   FAMILIAS, GÉNEROS Y BÚSQUEDA
   ========================================================================== */

.fviews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.85rem 0 1.2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.65rem;
}
.fviews a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.78rem;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.84rem;
  font-weight: 500;
}
.fviews a svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.fviews a.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.fx-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
.fx-tools input, .sx-box input {
  flex: 1;
  min-width: 240px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--card);
}
.sx-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card);
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  padding: 0.25rem 0.85rem;
  margin-bottom: 0.5rem;
}
.sx-box input {
  border: none;
  background: none;
  padding: 0.45rem 0;
  font-size: 1rem;
}
.sx-box input:focus { outline: none; }

.tchips, .sugg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-bottom: 1.25rem;
}
.tchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 500;
}
.tchip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.fam {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.fam:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.collage {
  display: grid;
  height: 135px;
  background: var(--bg-2);
  gap: 2px;
}
.collage.n2 { grid-template-columns: 1fr 1fr; }
.collage.n3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
.collage.n3 img:first-child { grid-row: 1 / 3; }
.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fam-b {
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fam-n {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.fam-g { color: var(--muted); }
.ftr {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.2rem;
}
.ftr > span {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.71rem;
  background: var(--bg);
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
}
.ftr em {
  font-style: normal;
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.65rem;
}

.ggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.75rem;
}
.gcard {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
}
.gcard img, .gcard .noimg {
  width: 3rem;
  height: 3rem;
  border-radius: 7px;
  object-fit: cover;
  background: var(--bg-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gcard > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fhero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.fh-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  height: 180px;
  gap: 2px;
  background: var(--bg-2);
}
.fh-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fh-ov {
  padding: 1.15rem 1.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.fh-act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fcols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.ttiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.ttile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ==========================================================================
   TALLER E IMPRESIÓN DE PLIEGOS A4 (#/imprimir)
   ========================================================================== */

.prt-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.prt-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prt-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.prt-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.prt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.prt-opt-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.prt-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prt-chk {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.prt-deck {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.prt-myfinds {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.prt-myfinds.empty-finds {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.prt-find-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.prt-fchip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.65rem 0.35rem 0.35rem;
  background: var(--card);
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  text-align: left;
  transition: all 0.15s ease;
}
.prt-fchip:hover {
  border-color: var(--accent);
}
.prt-fchip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.prt-fchip img, .prt-fchip .noimg {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-2);
}
.prt-fchip span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.prt-fchip b { font-size: 0.8rem; }
.prt-fchip small { font-size: 0.7rem; color: var(--muted); }
.prt-fchk {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  margin-left: 0.25rem;
}

.prt-deck-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.prt-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.prt-add-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.prt-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0.38rem 0.7rem;
}
.prt-search input {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.88rem;
}
.prt-search input:focus { outline: none; }

.prt-sugg, .prt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Vista previa de las hojas A4 en pantalla */
.prt-sheets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.prt-sheet {
  width: 100%;
  max-width: 920px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 1.35rem;
  box-shadow: 0 12px 34px rgba(27, 24, 20, 0.10);
}

.prt-sh-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

/* Cuadrícula 3×3 (tamaño coleccionable 63 × 88 mm) y 2×2 (ficha 90 × 128 mm) */
.prt-sheet.prt-poker .prt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.prt-sheet.prt-field .prt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

/* Modo plegable (anverso + reverso unidos por línea central) */
.prt-fold-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.prt-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px dashed var(--line-2);
  padding: 0.25rem;
  border-radius: 8px;
}
.prt-pair .prt-cell:first-child {
  border-right: 1.5px dashed var(--ink-2);
  padding-right: 0.25rem;
}
.prt-pair .prt-cell:last-child {
  padding-left: 0.25rem;
}

.prt-cell .tc {
  max-width: none;
  box-shadow: none;
}
.prt-cell .tc:hover {
  transform: none;
}

/* Marcas de corte para guillotina o tijera */
.prt-wrap.with-marks .prt-cell {
  position: relative;
  padding: 3px;
  outline: 0.5px dashed rgba(43, 38, 32, 0.35);
}

/* Modo ahorro de tinta (fondo blanco puro en la carta) */
.prt-wrap.ink-clean .tc,
.prt-wrap.ink-clean .tc-face,
.prt-wrap.ink-clean .tc-back {
  background: #ffffff !important;
}

/* ==========================================================================
   MAPAS, MODALES, TOAST Y ESTADOS DE CARGA
   ========================================================================== */

.tmap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #dde4e8;
  border: 1px solid var(--line);
}
.tmap span {
  position: absolute;
}
.tmap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tmap-c {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 0.5rem;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(255, 255, 255, 0.7);
  padding: 0 3px;
  border-radius: 2px;
}
.tmap-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.tray {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--forest-dark);
  color: #fff;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: calc(100vw - 24px);
}
.tray-in {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.tray-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
}

.toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  background: var(--forest-dark);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: all 0.2s ease;
}
.toast.show {
  opacity: 1;
  transform: none;
}

.loading, .empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.spinner {
  width: 2rem;
  height: 2rem;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.warn {
  margin-top: 2rem;
  padding: 0.8rem 1rem;
  background: var(--warn-bg);
  border: 1px solid rgba(148, 89, 20, 0.28);
  border-radius: var(--r);
  font-size: 0.82rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prose {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
}

dialog {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink);
  padding: 1.25rem;
  max-width: min(680px, 94vw);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
dialog::backdrop {
  background: rgba(18, 22, 18, 0.65);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.cb-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.75rem 0 1rem;
}
.cb-row {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.cb-row div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cb-row button {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.22);
}
.cb-row button.on {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.lightbox {
  background: rgba(15, 18, 15, 0.95);
  color: #fff;
  border: none;
  max-width: 92vw;
  max-height: 92vh;
  padding: 1rem;
}
.lightbox figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.lightbox img {
  max-height: 80vh;
  width: auto;
  border-radius: 6px;
}
.lb-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: #fff;
  font-size: 1.25rem;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 2rem;
  padding: 0.5rem;
}
.lb-nav.prev { left: 0.5rem; }
.lb-nav.next { right: 0.5rem; }

.only-m { display: none; }

/* ==========================================================================
   RESPONSIVE (MÓVIL Y TABLET)
   ========================================================================== */

@media (max-width: 980px) {
  .wb-both {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .xp, .sp2, .cp2-grid, .fw2 {
    grid-template-columns: 1fr;
  }
  .sp2-card, .cp2-card, .fw2-card {
    position: static;
  }
  .xp-rail {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    max-height: none;
    border-radius: 0;
  }
  .xp.filters-open .xp-rail {
    display: flex;
  }
  .only-m {
    display: inline-flex;
  }
  .topbar {
    flex-wrap: wrap;
    padding: 0.5rem 0.85rem;
  }
  .tabs {
    order: 3;
    width: 100%;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .tabs a span {
    font-size: 0.78rem;
  }
  .foot-meta {
    text-align: left;
  }
}

/* ==========================================================================
   REGLAS DE IMPRESIÓN FÍSICA (@media print) — MEDIDAS EXACTAS EN MILÍMETROS
   ========================================================================== */

@media print {
  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topbar,
  .foot,
  .tray,
  .toast,
  .no-print,
  .tc-acts,
  dialog {
    display: none !important;
  }

  .only-print {
    display: block !important;
  }

  #main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .prt-sheets {
    gap: 0 !important;
    display: block !important;
  }

  .prt-sheet {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    page-break-after: always;
    break-after: page;
  }
  .prt-sheet:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Pliego 3×3 a medida exacta de carta coleccionable: 63 mm × 88 mm */
  .prt-sheet.prt-poker .prt-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 63mm) !important;
    grid-auto-rows: 88mm !important;
    gap: 0mm !important;
    justify-content: center !important;
    align-content: center !important;
    min-height: 276mm;
  }

  /* Pliego 2×2 a medida de ficha de campo grande: 90 mm × 128 mm */
  .prt-sheet.prt-field .prt-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 90mm) !important;
    grid-auto-rows: 128mm !important;
    gap: 3mm !important;
    justify-content: center !important;
    align-content: center !important;
    min-height: 276mm;
  }

  /* Modo plegable (anverso + reverso unidos para doblar) */
  .prt-sheet.prt-fold.prt-poker .prt-fold-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2mm !important;
    min-height: 276mm;
  }
  .prt-sheet.prt-fold.prt-poker .prt-pair {
    display: grid !important;
    grid-template-columns: 63mm 63mm !important;
    grid-auto-rows: 88mm !important;
    padding: 0 !important;
    border: 0.25mm dashed #666 !important;
    border-radius: 0 !important;
  }
  .prt-sheet.prt-fold.prt-field .prt-pair {
    display: grid !important;
    grid-template-columns: 90mm 90mm !important;
    grid-auto-rows: 128mm !important;
    padding: 0 !important;
    border: 0.25mm dashed #666 !important;
    border-radius: 0 !important;
  }

  .prt-cell {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .prt-wrap.with-marks .prt-cell {
    outline: 0.2mm dashed #8a8275 !important;
  }

  .prt-cell .tc {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 3mm !important;
    border-width: 0.35mm !important;
    box-shadow:
      inset 0 0 0 0.8mm var(--paper-card),
      inset 0 0 0 1mm rgba(51, 43, 34, 0.3) !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Impresión directa desde ficha de especie: muestra anverso y reverso lado a lado */
  .sp2 .flip-in {
    transform: none !important;
    display: grid !important;
    grid-template-columns: 63mm 63mm !important;
    gap: 4mm !important;
  }
  .sp2 .flip-b {
    position: static !important;
    transform: none !important;
  }
}

/* ==========================================================================
   COMPONENTES RECUPERADOS (estadísticas, comparador, galería, fichas…)
   Sus estilos se perdieron al rehacer la hoja; vuelven con la paleta actual.
   ========================================================================== */

:root {
  --white: #fff;
  /* colores de los gráficos (guía de visualización): 3 de identidad y una rampa verde para los % */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  --seq-0: #e4eedb; --seq-a: #a5c78a; --seq-1: #335c25;
  --mp-base: #9fbd84; --mp-dim: #d9d3c6; --mp-na: #efebe2; --vm-dot: #8c9a7c;
}

@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes beam { to { top: 100%; } }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.swatches { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.swatches i { width: 18px; height: 18px; border-radius: 5px; border: .5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.swatches.sm i { width: 12px; height: 12px; border-radius: 3px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tool.more { margin: 10px auto 0; display: flex; }
.src { font: 700 .6rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--terra); background: var(--terra-soft); border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; cursor: help; }
.gallery { min-width: 0; }
.g-main { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; border-radius: 14px; overflow: hidden; background: var(--card-2); aspect-ratio: 4 / 3; }
.g-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.g-main:hover img { transform: scale(1.02); }
.g-thumbs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.g-thumbs button { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; background: var(--card-2); }
.g-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-thumbs button:hover { outline: 2px solid var(--accent); }
.g-credit { font-size: .74rem; color: var(--muted); margin-top: 6px; }
.g-credit a { color: var(--muted); }
.g-note { font-size: .8rem; color: var(--terra); margin-top: 2px; }
.gallery.empty { display: grid; place-items: center; gap: 6px; padding: 24px; background: var(--card-2); border-radius: 14px; text-align: center; }
.gallery.empty .picto { width: 120px; height: 120px; }
.sp-head .row .tool { font-size: .85rem; }
.kv.compact { grid-template-columns: 140px 1fr; font-size: .92rem; margin: 10px 0 4px; }
.fit { font-size: .88rem; border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.fit.ok { background: var(--accent-soft); }
.fit.unk { background: var(--card-2); color: var(--muted); }
.fit.bad { background: var(--danger-bg); color: var(--danger); }
@media (max-width: 760px) {
  .g-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.opt.more { border-style: dashed; color: var(--muted); }
.row.tight { margin-top: 6px; gap: 8px; }
.legend .lg { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.legend .lg.off { color: var(--muted); }
.ctl { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 500; }
.tool.more { display: flex; margin: 26px auto 0; padding: 10px 22px; }
.tier { display: flex; align-items: baseline; gap: 10px; margin: 34px 0 0; padding-top: 16px; border-top: 2px dashed color-mix(in srgb, var(--warn) 55%, transparent); }
.tier span { font: 600 1.05rem var(--serif); color: #8a5a0c; }
.tier small { color: var(--muted); }
.opts.icons .opt.more { justify-content: center; font-weight: 600; }
.conf-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.conf-dot.alta { background: var(--ok); }
.conf-dot.media { background: var(--warn); }
.conf-dot.baja { background: var(--line-2); }
body.dropping::after { content: "Suelta tus fotos para analizarlas"; position: fixed; inset: 12px; z-index: 60; display: grid; place-items: center; border: 3px dashed var(--ai); border-radius: 24px; background: color-mix(in srgb, var(--ai-soft) 85%, transparent); font: 600 1.4rem var(--serif); color: var(--ai); pointer-events: none; }
.tray-title { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.tray-item.you { padding-right: 12px; background: rgba(185, 164, 255, .2); }
.tray-hint { font-size: .84rem; opacity: .75; white-space: nowrap; }
.qai { margin: -4px 0 0; font-size: .82rem; color: var(--ai); }
.qsw { grid-area: ic; width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); display: inline-block; }
.qsw.sm { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }
.busy { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(20, 16, 10, .55); backdrop-filter: blur(6px); animation: fadein .25s; }
.busy-card { width: min(420px, 92vw); background: var(--card); border-radius: 24px; padding: 18px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); }
.scan { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #1d1a15; }
.scan img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.steps { list-style: none; margin: 16px 4px 4px; padding: 0; display: grid; gap: 8px; font-size: .95rem; color: var(--muted); }
.steps li.now { color: var(--ink); font-weight: 600; }
.steps li.done { color: var(--accent); }
.dot-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--ai); border-radius: 50%; animation: spin .9s linear infinite; vertical-align: -1px; margin-right: 2px; }
.fw { max-width: 1260px; margin: 0 auto; }
.la-u { margin: 0; font-size: .78rem; color: var(--muted); }
.disc { margin-top: 14px; font-size: .88rem; }
.disc summary { cursor: pointer; color: var(--muted); }
.disc .kchips { margin-top: 8px; }
.disc .kchip { background: var(--card-2); border-color: var(--line-2); font-weight: 400; }
.qmore-h { font: 600 1.05rem var(--serif); margin: 22px 0 10px; }
.qgrid.more { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
details.qmore { padding: 0; gap: 0; box-shadow: var(--shadow-sm); }
details.qmore > summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 1rem; }
details.qmore > summary::-webkit-details-marker { display: none; }
details.qmore > summary::after { content: "+"; color: var(--accent); font: 700 1.2rem var(--sans); }
details.qmore[open] > summary::after { content: "−"; }
details.qmore > :not(summary) { margin: 0 16px; }
details.qmore[open] { padding-bottom: 14px; }
details.qmore .qopts { margin-bottom: 8px; }
.alltraits { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.alltraits > summary { cursor: pointer; padding: 14px 18px; font: 600 1.05rem var(--serif); list-style: none; display: flex; gap: 10px; align-items: baseline; }
.alltraits > summary::-webkit-details-marker { display: none; }
.alltraits > summary::after { content: "+"; margin-left: auto; color: var(--accent); font: 700 1.2rem var(--sans); }
.alltraits[open] > summary::after { content: "−"; }
.rail-body.inline { overflow: visible; padding: 0 6px 12px; columns: 2 420px; column-gap: 20px; }
.rail-body.inline details.sec { break-inside: avoid; }
.rail-body.inline details.sec > summary { position: static; }
.fw .mosaic { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 960px) {
  .fw .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gm-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.gm-h h3 { font: 600 1.1rem var(--serif); color: var(--ai); }
.gm-ic { display: grid; place-items: center; }
.gm-ic .picto { width: 22px; height: 22px; }
.gm-next { margin: 10px 0 0; font-size: .84rem; color: var(--muted); }
.la-fix { flex: none; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--card); color: var(--danger); border-radius: 999px; padding: 2px 9px; font: 600 .72rem var(--sans); cursor: pointer; white-space: nowrap; }
.la-fix:hover { background: var(--danger); color: #fff; }
.sv { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.tile.more { justify-content: center; border-style: dashed; color: var(--muted); font-size: .85rem; font-weight: 700; }
.lx-t { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; flex: 1; min-width: 0; }
.lx-t small { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.gm-ic .picto { width: 26px; height: 26px; }
.cv { max-width: 1260px; margin: 0 auto; --lab: 190px; }
.cv > h1 { font-size: 2.1rem; }
.cv-h.you { border-top-color: var(--ai); box-shadow: 0 0 0 2px var(--ai), var(--shadow); }
.cv-same > summary { cursor: pointer; list-style: none; }
.cv-same > summary::-webkit-details-marker { display: none; }
.cv-same > summary h2::after { content: "+"; color: var(--accent); font: 700 1.2rem var(--sans); margin-left: 4px; }
.cv-same[open] > summary h2::after { content: "−"; }
.cv-cell.you { background: color-mix(in srgb, var(--ai-soft) 60%, var(--card)); border-color: color-mix(in srgb, var(--ai) 40%, var(--line)); }
.cv-cell.na { justify-content: center; background: transparent; border-style: dashed; color: var(--line-2); }
.cv-cell.cv-sw > i:not(.cv-b) { width: 22px; height: 22px; border-radius: 50%; border: .5px solid color-mix(in srgb, var(--ink) 30%, transparent); display: inline-block; }
.cv-b { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--bg); }
.cv-b .ico { width: 12px; height: 12px; stroke-width: 3; }
.cv-b.ok { background: var(--ok); }
.cv-b.no { background: var(--danger); }
.cv-more { color: var(--muted); }
.cv-bar small.in { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.cv-bar.na { display: flex; align-items: center; padding-left: 8px; color: var(--muted); font-size: .74rem; border-left: 4px solid var(--c); }
.cv-me { position: absolute; top: -2px; bottom: 14px; width: 0; border-left: 2px dashed var(--ai); }
.cv-me span { position: absolute; bottom: -16px; left: 4px; white-space: nowrap; font-size: .7rem; font-weight: 700; color: var(--ai); }
.cv-hint { margin-top: 22px; display: flex; align-items: center; gap: 6px; }
.cv-empty { display: grid; justify-items: center; gap: 10px; }
.cv-s { display: flex; align-items: center; gap: 8px; font-size: .84rem; border-bottom: 3px solid var(--c); padding-bottom: 4px; min-width: 0; }
.cv-s img, .cv-s .picto { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: none; }
.cv-s span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv.scrolled .cv-strip { opacity: 1; pointer-events: auto; }
@media (max-width: 760px) {
  .cv { --lab: 0px; }
  .cv-s span { display: none; }
  .cv-cell.cv-sw > i:not(.cv-b) { width: 18px; height: 18px; }
  .cv-s { justify-content: center; }
}
.fx-top h1, .sx-top h1 { font-size: 2.3rem; }
.fx-top p { margin: 6px 0 0; color: var(--muted); max-width: 720px; }
.ord { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 30px 2px 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ord h2 { font-size: 1.35rem; }
.ord small { color: var(--muted); font-size: .82rem; }
.collage.n0, .collage.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.fam-now { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; background: var(--terra); color: #fff; font: 600 .72rem var(--sans); border-radius: 999px; padding: 3px 9px 3px 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.fam-now .ico, .fh-now .ico { width: 13px; height: 13px; }
.fh-strip.n0, .fh-strip.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.fh-t { flex: 1 1 380px; min-width: 0; }
.fh-t p { margin: 6px 0 0; color: rgba(255, 255, 255, .82); }
.fh-t p a { color: #fff; }
.fh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.fh-chips small { font: 700 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-right: 2px; }
.fh-chips span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(6px); border-radius: 999px; padding: 2px 12px 2px 3px; font-size: .86rem; color: #fff; }
.fh-chips .picto { width: 26px; height: 26px; background: #fbf6ec; border-radius: 50%; }
.fh-now { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--terra); color: #fff; border-radius: 999px; padding: 4px 12px 4px 9px; font: 600 .8rem var(--sans); }
.ttile .pc { grid-area: pc; align-self: end; font: 650 1.45rem/1.1 var(--serif); color: var(--accent); white-space: nowrap; }
.ttile .vs { grid-area: v; display: grid; gap: 4px; margin-top: 10px; }
.ttile .vs small { font-size: .72rem; color: var(--muted); }
.ttile .vs i, .tbar i { position: relative; display: block; height: 7px; border-radius: 4px; background: var(--bg-2); }
.ttile .vs i b, .tbar i b { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent); }
.ttile .vs i u, .tbar i u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.tbars { display: grid; gap: 9px; }
.tbar { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "p l n" "p b b"; gap: 3px 10px; align-items: center; font-size: .86rem; }
.tbar .picto { grid-area: p; width: 32px; height: 32px; }
.tbar > span { grid-area: l; line-height: 1.25; }
.tbar i { grid-area: b; }
.tbar em { grid-area: n; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrows { display: grid; gap: 9px; }
.mrow { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .86rem; }
.mrow > span:first-child { color: var(--muted); }
.mrow .rb { position: relative; height: 10px; border-radius: 5px; background: var(--card-2); }
.mrow .rb i, .mrow .rb b { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.mrow .rb i { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.mrow .rb b { background: var(--accent); }
.mrow em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cshares { display: flex; flex-wrap: wrap; gap: 6px; }
.cshare { display: inline-flex; align-items: center; gap: 6px; background: var(--card-2); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: .82rem; }
.cshare i { width: 20px; height: 20px; border-radius: 50%; border: .5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.cshare b { font-size: .76rem; color: var(--muted); }
.sx-top > p { margin: 0 2px; }
.lkc .lk-d { flex: 1; color: var(--muted); font-size: .78rem; }
.la-season.in { color: var(--ok); }
.cv-months { flex-direction: column; align-items: stretch !important; gap: 4px; }
.cv-months .mchart.sm { height: 40px; }
.center-row { justify-content: center; }
.vz-ctrl { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: 14px 0 12px; }
.vz-ctrl select { max-width: 260px; }
.seg.wrap { flex-wrap: wrap; border-radius: 14px; }
.vz { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 1000px) {
  .vz { grid-template-columns: minmax(0, 1fr); }
}
.vz-fig { margin: 0; padding: 10px; position: relative; }
.vz-fig figcaption { padding: 6px 6px 2px; }
.vz-fig figcaption p { margin: 6px 0 0; }
.vz-side { margin: 0; }
.side-h { display: flex; align-items: center; gap: 8px; }
.side-h h3 { font: 600 1.05rem var(--sans); flex: 1; }
.side-h .picto { width: 34px; height: 34px; }
.mp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb { cursor: pointer; }
.mb .hit { fill: transparent; }
.mb .b { stroke: var(--card); stroke-width: 2; transition: fill .4s, opacity .3s; }
.mb.dim .b { opacity: .55; }
.mb:hover .b, .mb.hl .b, .mb:focus-visible .b { stroke: var(--ink); stroke-width: 2.5; }
.ml { font-family: var(--sans); font-weight: 600; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: .3em; stroke-linejoin: round; pointer-events: none; }
.mb:focus { outline: none; }
.lg-seq, .lg-cat, .lg-size { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.lg-seq > i { width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--seq-0), var(--seq-1)); }
.lg-na { display: inline-flex; align-items: center; gap: 5px; }
.lg-na i { width: 12px; height: 12px; border-radius: 3px; background: var(--mp-na); border: 1px solid var(--line); }
.lg-cat span { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.lg-cat i { width: 12px; height: 12px; border-radius: 50%; }
.lg-size span { display: inline-flex; align-items: center; gap: 4px; }
.lg-size svg circle { fill: var(--mp-base); }
.stk { display: flex; gap: 2px; height: 14px; margin: 8px 0 6px; }
.stk i { min-width: 3px; }
.stk i:first-child { border-radius: 4px 0 0 4px; }
.stk i:last-child { border-radius: 0 4px 4px 0; }
.stk-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .84rem; }
.stk-l li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.stk-l li i { width: 10px; height: 10px; border-radius: 2px; }
.stk-l b { font-weight: 600; font-variant-numeric: tabular-nums; }
.stk-l small { color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.hbars { display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 46px; gap: 8px; align-items: center; font-size: .84rem; text-decoration: none; color: var(--ink); }
.hbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar i { height: 10px; background: var(--card-2); border-radius: 0 4px 4px 0; }
.hbar i b { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--seq-1); }
.hbar em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hbar:hover span { text-decoration: underline; }
.ins-grid { display: grid; gap: 8px; margin-top: 8px; }
.ins { display: grid; gap: 2px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; color: var(--ink); font: inherit; }
button.ins { cursor: pointer; }
button.ins:hover { border-color: var(--accent); }
.ins-h { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.ins-h .picto { width: 26px; height: 26px; }
.ins-v { font: 650 1.6rem/1.1 var(--sans); }
.ins-t { font-size: .9rem; }
.ins small { color: var(--muted); font-size: .74rem; }
.vt-n { font: 650 1rem var(--serif); }
.vt-n.latin { font-weight: 500; }
.vt-s { color: var(--muted); }
.vt-v { margin: 4px 0 2px; }
.vt-v b { font-size: 1.05rem; }
.vt-v small { color: var(--muted); }
.vt-ph { display: flex; gap: 3px; margin-bottom: 4px; }
.vt-ph img { width: 60px; height: 48px; object-fit: cover; border-radius: 6px; }
.vt-big { width: 100%; max-height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; }
.vt-tr { display: flex; align-items: center; gap: 5px; font-size: .8rem; }
.vt-tr .picto { width: 20px; height: 20px; }
.vm-c { display: block; width: 100%; border-radius: 12px; touch-action: none; background: var(--card); }
.vm-zoom { position: absolute; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 4px; }
.vm-zoom .tool { width: 34px; height: 34px; justify-content: center; padding: 0; font-size: 1.1rem; }
.picks { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pick { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: .84rem; }
.pick > i { width: 11px; height: 11px; border-radius: 50%; }
.pick small { color: var(--muted); font-variant-numeric: tabular-nums; }
.pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pairs li { display: grid; gap: 1px; }
.pairs .link { text-align: left; text-decoration: none; color: var(--ink); font-weight: 500; }
.pairs .link:hover { text-decoration: underline; }
.pairs small { color: var(--muted); font-size: .76rem; }
.hm-card { padding: 12px; }
.hm-wrap { overflow: auto; max-height: 75vh; margin-top: 10px; border-radius: 10px; }
.hm { border-collapse: separate; border-spacing: 2px; font-size: .82rem; }
.hm thead th { position: sticky; top: 0; z-index: 2; background: var(--card); vertical-align: bottom; padding: 0 0 4px; }
.hm tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; font-weight: 500; padding: 0 10px 0 2px; white-space: nowrap; }
.hm tbody th a { color: var(--ink); text-decoration: none; }
.hm tbody th a:hover { text-decoration: underline; }
.hm tbody th small { color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.hm-corner { position: sticky; left: 0; top: 0; z-index: 3 !important; text-align: left; font-weight: 600; color: var(--muted); }
.hm-h { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 58px; background: none; border: 0; border-radius: 8px; padding: 4px 2px; cursor: pointer; color: var(--ink); font: 500 .68rem/1.15 var(--sans); }
.hm-h .picto { width: 30px; height: 30px; }
.hm-h span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-align: center; hyphens: auto; overflow-wrap: break-word; }
.hm thead .hm-g th { position: static; padding: 0 2px 2px; }
.hm-g span { display: block; border-bottom: 2px solid var(--line-2); font: 600 .72rem var(--sans); color: var(--muted); text-align: center; padding-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-h:hover, .hm-h.on { background: var(--card-2); }
.hm-h.on { box-shadow: inset 0 -2px var(--ink); }
.hm-sw { width: 26px; height: 26px; border-radius: 50%; border: .5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.hm td { width: 58px; min-width: 40px; height: 28px; border-radius: 5px; text-align: center; font: 600 .72rem var(--sans); font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--seq-0), var(--seq-1) calc(var(--v, 0) * 100%)); }
.hm td.hi { color: var(--card); }
.hm td.na { background: var(--mp-na); }
.hm td:hover { outline: 2px solid var(--ink); outline-offset: -1px; }
.hm.cal td { width: 44px; height: 24px; }
.hm.cal th.now .cal-m, .hm.cal td.now { box-shadow: 0 0 0 2px var(--terra); }
.hm.cal td.now { box-shadow: inset 0 0 0 2px var(--terra); }
.cal-m { display: inline-block; font: 600 .74rem var(--sans); color: var(--muted); padding: 2px 4px; border-radius: 5px; text-transform: capitalize; }
.hm.cal td.cal-t { background: none; width: auto; text-align: left; font: 400 .76rem var(--sans); color: var(--muted); white-space: nowrap; padding-left: 8px; }
.hm.cal td.cal-t:hover { outline: none; }
.cal-now-l { margin: 0 2px 12px; }
@media (max-width: 640px) {
  .vz-ctrl { gap: 8px; }
  .vz-ctrl .ctl { max-width: 100%; min-width: 0; white-space: nowrap; }
  .vz-ctrl .seg { flex: 1 1 auto; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .vz-ctrl .seg button { flex: none; }
  .vz-ctrl select { min-width: 0; flex: 1; }
  .hm-h { width: 48px; }
}
.xp.enter .tc, .fw.enter .tc { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
body.dropping .tc-art.empty { outline: 3px dashed #f0d79a; outline-offset: -6px; }
.lk-grid { align-items: start; }
.lk-c { display: flex; flex-direction: column; gap: 8px; }
.lk-d { font-size: .8rem; color: var(--muted); margin: 2px 2px 0; }
.lk-c .btn { align-self: flex-start; }
.cv-head.vs::after { content: "VS"; position: absolute; top: 34%; left: calc(var(--lab) + 18px + (100% - var(--lab) - 24px) / 2); transform: translate(-50%, -50%) rotate(-8deg); z-index: 5;
  font: 900 1.6rem/1 var(--sans); color: #fff; background: linear-gradient(135deg, #d6403a, #8a1f17); padding: 12px 10px; border-radius: 14px; box-shadow: 0 8px 20px -6px rgba(120, 20, 10, .6), 0 0 0 3px #fff4d6; letter-spacing: .04em; }
@media (max-width: 760px) {
  .cv-head.vs::after { display: none; }
}
.cp2 .cp-head h1 { font-size: 2.2rem; margin-top: 6px; }
.la2-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-items: start; }


.scan .beam { position: absolute; left: 0; right: 0; height: 34%; top: -34%; background: linear-gradient(transparent, rgba(216, 190, 140, .6), transparent); animation: beam 1.6s ease-in-out infinite; }
.sw1 { width: 18px; height: 18px; border-radius: 50%; border: .5px solid rgba(0, 0, 0, .25); display: inline-block; }

/* ==========================================================================
   CASILLAS DE RASGOS: EN PANTALLA SOLO ICONOS, AL IMPRIMIR ICONO + PALABRA
   ========================================================================== */

.tc-slots {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 3px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.tc-sl {
  position: relative;
  justify-content: center;
  aspect-ratio: 1 / .82;
  padding: 0;
  gap: 0;
  border-radius: 7px;
  border: 1px solid rgba(67, 56, 42, .18);
  background: rgba(252, 249, 242, .95);
}
.tc-sl .sl-txt { display: none; }
.tc-sl .sl-ic { width: 74%; height: 74%; }
.tc-sl .sl-ic .picto { width: 100%; height: 100%; }
.tc-sl.ghost { opacity: 1; background: rgba(240, 234, 222, .55); border-style: dashed; }
.tc-sl.ghost .sl-ic { opacity: .2; filter: grayscale(1); }

.tc-sl.ok { background: var(--ok-bg); border-color: rgba(38, 89, 52, .45); }
.tc-sl.no { background: var(--danger-bg); border-color: rgba(158, 42, 37, .5); }
.tc-sl.unk { border-style: dotted; }
.tc-sl.diff { background: var(--warn-bg); border-color: rgba(148, 89, 20, .45); }
.tc-sl.ai { background: var(--ai-soft); border-style: dashed; border-color: rgba(109, 76, 48, .5); }
button.tc-sl { cursor: pointer; }
button.tc-sl:hover, button.tc-sl.pk-from { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 2px rgba(40, 75, 49, .25); }
.sl-n, .sl-ai {
  position: absolute;
  font-style: normal;
  font: 700 .5rem/1 var(--mono);
  pointer-events: none;
}
.sl-n { top: 1px; right: 2px; color: var(--ink-2); }
.sl-ai { bottom: 1px; left: 2px; font-size: .52rem; }
.tc-hp.pk-from, .tc-type.pk-from, .tc-pal.pk-from { box-shadow: 0 0 0 2px var(--accent); }

/* hoja de impresión (vista previa) y papel: la tabla de 2 × 5 con texto */
.prt-sheet .tc-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(67, 56, 42, .16);
  border: 1px solid rgba(67, 56, 42, .26);
  border-radius: 6px;
  overflow: hidden;
}
.prt-sheet .tc-sl { aspect-ratio: auto; justify-content: flex-start; gap: .28rem; padding: .15rem .32rem; border: 0; border-radius: 0; box-shadow: none; }
.prt-sheet .tc-sl .sl-ic { width: 1.05rem; height: 1.05rem; }
.prt-sheet .tc-sl .sl-txt { display: flex; }
.prt-sheet .tc-sl.ghost .sl-ic { opacity: .45; }
.prt-sheet .sl-n, .prt-sheet .sl-ai { display: none; }
@media print {
  .tc-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
    background: rgba(67, 56, 42, .16) !important;
    border: 1px solid rgba(67, 56, 42, .26) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  .tc-sl { aspect-ratio: auto !important; justify-content: flex-start !important; gap: .28rem !important; padding: .15rem .32rem !important; border: 0 !important; border-radius: 0 !important; }
  .tc-sl .sl-ic { width: 1.05rem !important; height: 1.05rem !important; }
  .tc-sl .sl-txt { display: flex !important; }
  .tc-sl.ghost .sl-ic { opacity: .45 !important; }
  .sl-n, .sl-ai, .tc-scan { display: none !important; }
}

/* análisis en curso sobre la propia carta: la foto con un barrido dorado */
.tc-scan { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: .6rem; background: rgba(23, 35, 26, .28); overflow: hidden; }
.tc-scan .beam { position: absolute; left: 0; right: 0; height: 38%; top: -38%; background: linear-gradient(transparent, rgba(216, 190, 140, .75), transparent); animation: beam 1.5s ease-in-out infinite; }
.tc-scan b { position: relative; background: rgba(23, 35, 26, .88); color: #faf6ee; font-size: .72rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--gold-accent); }

.pickb {
  width: 1.72rem;
  height: 1.72rem;
  border-radius: 6px;
  background: rgba(250, 246, 238, .94);
  border: 1px solid rgba(43, 38, 32, .3);
  color: var(--ok);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.pickb:hover { background: var(--ok-bg); border-color: var(--ok); }
.pickb.on { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ==========================================================================
   SELECTOR DE UN RASGO (casillas de la carta y «más rasgos»)
   ========================================================================== */

.tc-pk {
  width: min(410px, calc(100vw - 20px));
  max-height: min(580px, calc(100vh - 20px));
  display: flex;
  flex-direction: column;
  padding: .7rem .75rem .65rem;
  animation: pkin .16s ease-out;
}
@keyframes pkin { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.tc-pk.sheet { max-height: 72vh; border-radius: 16px 16px 12px 12px; }
.pk-h { margin-bottom: .45rem; padding-bottom: .45rem; }
.pk-h .picto { width: 1.6rem; height: 1.6rem; }
.pk-h b { font-family: var(--serif); font-size: 1.05rem; }
.pk-hn { font: 600 .62rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .2rem; }
.pk-help { font-size: .8rem; color: var(--muted); margin: 0 0 .5rem; }
.pk-ai { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; font-size: .8rem; margin: 0 0 .5rem; padding: .4rem .6rem; border-radius: 8px; background: var(--ai-soft); color: var(--ai); }
.pk-ai .link { margin-left: auto; color: var(--ai); font-size: .78rem; }
.pk-q { width: 100%; margin-bottom: .45rem; padding: .42rem .65rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); font-size: .84rem; }
.tc-pk .pk-grid { flex: 1; min-height: 0; max-height: none; overflow-y: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; padding: 2px 4px 4px 2px; }
.tc-pk .pk-grid.colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-pk .pk-o { position: relative; display: flex; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-size: .8rem; font-weight: 500; color: var(--ink); }
.tc-pk .pk-o:hover { border-color: var(--accent); background: #fff; }
.tc-pk .pk-o.on { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; color: var(--accent-2); }
.tc-pk .pk-o.zero { opacity: .42; }
.tc-pk .pk-o.ai { border-style: dashed; border-color: var(--ai); }
.pk-b { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: .42rem .5rem; text-align: left; color: inherit; font: inherit; }
.colors .pk-b { grid-template-columns: 1.3rem minmax(0, 1fr); }
.colors .pk-b .pk-n { grid-column: 1 / -1; text-align: left; flex-direction: row; gap: .3rem; align-items: baseline; }
.pk-b > .picto { width: 1.9rem; height: 1.9rem; }
.pk-b > .pk-sw { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .22); }
.pk-l { line-height: 1.2; overflow-wrap: anywhere; }
.pk-n { display: flex; flex-direction: column; align-items: flex-end; font: 700 .8rem/1.1 var(--mono); color: var(--ink); }
.pk-n small { font-size: .6rem; font-weight: 500; color: var(--muted); }
.pk-grid.bin .pk-b { grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding: .6rem .6rem; font-size: .9rem; }
.pk-grid.bin .pk-b > .picto { width: 2.4rem; height: 2.4rem; }
.pk-or { position: absolute; top: -7px; right: -6px; padding: 0 .35rem; height: 1.15rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font: 700 .62rem var(--mono); color: var(--accent); }
.pk-or:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tc-pk .pk-num { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.tc-pk .pk-num input { width: 7rem; padding: .45rem .6rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 1rem; }
.tc-pk .pk-f { margin-top: .5rem; padding-top: .45rem; }

/* ==========================================================================
   EXPLORAR: TU CARTA CONTRA TODAS LAS ESPECIES
   ========================================================================== */

.xp { grid-template-columns: 344px minmax(0, 1fr); gap: 1.35rem; }
.xp-main { min-width: 0; }
.xp-rail.lab { top: 4.4rem; max-height: calc(100vh - 5.2rem); }
.lab-top { padding: .7rem .8rem .6rem; border-bottom: 1px solid var(--line); background: var(--card-2); display: flex; flex-direction: column; gap: .5rem; }
.lab-top h2 { font-size: 1.12rem; margin: 0; }
.lab-src { display: flex; gap: .4rem; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.lab-s {
  position: relative;
  flex: none;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 10px;
  border: 1.5px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.lab-s:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--ink); }
.lab-s img { width: 100%; height: 100%; object-fit: cover; }
.lab-s .ico { width: 1.25rem; height: 1.25rem; }
.lab-s .picto { width: 1.35rem; height: 1.35rem; }
.lab-s small { font-size: .56rem; font-weight: 700; line-height: 1; }
.lab-s.up { background: var(--terra); border-color: var(--terra); color: #fff; }
.lab-s.up:hover { background: var(--terra-dark); color: #fff; }
.lab-s.on { border-color: var(--accent); box-shadow: 0 0 0 2.5px var(--accent); }
.lab-s.ghost { background: var(--bg-2); border-style: dashed; cursor: default; }
.lab-card { padding: .75rem .8rem .5rem; }
.lab-card .tc { max-width: 100%; }
.lab-card .tc:hover { transform: none; }
body.dropping .lab-card .tc { outline: 3px dashed var(--terra); outline-offset: 3px; }
.lab-info { margin: 0 .8rem .55rem; padding: .55rem .7rem; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; font-size: .84rem; display: grid; gap: .35rem; justify-items: start; }
.lab-info p { margin: 0; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.lab-warn { color: var(--danger); font-weight: 600; }
.lab-more { padding: 0 .8rem 1rem; }
.lab-more-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .55rem; padding: .55rem 0 .35rem; background: var(--card); }
.lab-more-h h3 { margin: 0; font-size: 1rem; flex: none; }
.lab-more-h input { flex: 1; min-width: 0; padding: .38rem .6rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); font-size: .8rem; }
.tl-sec h4 { margin: .75rem 0 .2rem; font: 700 .64rem var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.tl-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .36rem .45rem;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  font-size: .83rem;
  color: var(--ink);
}
.tl-row:hover, .tl-row.pk-from { background: var(--bg); border-color: var(--line-2); }
.tl-row.set { background: var(--accent-soft); border-color: rgba(40, 75, 49, .32); }
.tl-ic .picto { width: 1.55rem; height: 1.55rem; }
.tl-k { line-height: 1.2; }
.tl-k .tipb { margin-left: .35rem; white-space: nowrap; }
.tl-v { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 600; text-align: right; }
.tl-v.none { color: var(--line-2); font-weight: 400; }
.tl-v.ai { color: var(--ai); }
.tl-v .swatches { vertical-align: middle; }
.rail-body.inline .tl-sec { break-inside: avoid; }

.xp-head { gap: .6rem; }
.xp-count { flex-wrap: wrap; align-items: center; row-gap: .5rem; }
.xp-count .big { font-size: 2.5rem; font-variant-numeric: tabular-nums; }
.xp-count select { padding: .35rem .6rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); font-size: .8rem; }
.legend { align-items: center; row-gap: .4rem; }
.legend b { font-family: var(--mono); font-weight: 700; }
.legend .ctl { font-size: .78rem; }
.achips { display: flex; flex-wrap: wrap; gap: .35rem; }
.achip .picto.xs { margin-right: .1rem; }
.achip.soft { border-style: dashed; border-color: var(--ai); background: var(--ai-soft); color: var(--ai); }
.nexttip { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; }
.nexttip:hover { border-color: var(--warn); background: #f6e3c4; }
.nt-sh { font: 500 .72rem var(--mono); color: var(--muted); }
.xp .cards { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 1rem; }
.xp.enter .ptile { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 18ms); }

/* mosaico de fotos: muchas a la vez, para ver cómo se van descartando */
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .6rem; }
.ptile { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-sm); color: #fff; }
.ptile img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ptile:hover img { transform: scale(1.05); }
.ptile:hover { color: #fff; }
.ptile.near { opacity: .82; outline: 2px dashed var(--warn); outline-offset: -2px; }
.pt-none { display: grid; place-items: center; width: 100%; height: 100%; }
.pt-none .picto { width: 50%; height: 50%; opacity: .5; }
.pt-name { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 1.5rem .5rem .4rem; line-height: 1.15; background: linear-gradient(transparent, rgba(14, 20, 14, .85)); }
.pt-name em { font-size: .82rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-name small { font-size: .64rem; color: rgba(255, 255, 255, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-pct { position: absolute; top: .35rem; right: .35rem; padding: .1rem .38rem; border-radius: 999px; background: rgba(23, 35, 26, .88); border: 1.5px solid var(--gold-accent); font: 700 .66rem var(--mono); color: #faf6ee; }
.pt-gem { position: absolute; top: .3rem; left: .35rem; font-style: normal; }
.pt-bad { position: absolute; top: .35rem; left: .35rem; right: 3.2rem; padding: .1rem .35rem; border-radius: 5px; background: var(--danger-bg); color: var(--danger); font-size: .6rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lab-bar { display: none; }

@media (max-width: 860px) {
  .xp-rail.lab { max-height: none; top: 0; }
  .lab-card .tc { max-width: 330px; }
  .lab-bar.only-m { display: flex; align-items: center; gap: .45rem; margin: -.2rem 0 .2rem; }
  .mb-ph { flex: none; width: 3.1rem; height: 3.1rem; border-radius: 10px; overflow: hidden; border: 2px solid var(--accent); padding: 0; }
  .mb-ph img { width: 100%; height: 100%; object-fit: cover; }
  .mb-ph.up { display: grid; place-items: center; background: var(--terra); border-color: var(--terra); color: #fff; }
  .mb-ph.up .ico { width: 1.4rem; height: 1.4rem; }
  .mb-sls { flex: 1; min-width: 0; display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }
  .mb-sl { position: relative; flex: none; width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border-radius: 9px; border: 1px dashed var(--line-2); background: var(--card); }
  .mb-sl .picto { width: 1.75rem; height: 1.75rem; opacity: .25; filter: grayscale(1); }
  .mb-sl.set { border: 1.5px solid var(--accent); background: var(--accent-soft); }
  .mb-sl.set .picto { opacity: 1; filter: none; }
  .mb-sl.ai { border: 1.5px dashed var(--ai); background: var(--ai-soft); }
  .mb-sl.ai .picto { opacity: .9; filter: none; }
  .mb-more { flex: none; padding: .55rem .7rem; border-radius: 9px; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; }
  .xp-head { padding: .8rem; }
  .brand-text small { display: none; }
  .btn.newfind { margin-left: auto; padding: .45rem .75rem; }
  .nt-sh { display: none; }
  .xp-count .big { font-size: 2rem; }
  .xp .cards, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .pt-name { padding: 1rem .35rem .3rem; }
  .pt-name small { display: none; }
}

/* cartas pequeñas (dos por fila en el móvil): letra y huecos más ajustados */
@media (max-width: 560px) {
  :is(.cards, .cv-head) .tc .tc-face { padding: .4rem .4rem .35rem; gap: .25rem; }
  :is(.cards, .cv-head) .tc .tc-h { min-height: 0; gap: .25rem; padding-bottom: .2rem; }
  :is(.cards, .cv-head) .tc .tc-kicker { font-size: .42rem; }
  :is(.cards, .cv-head) .tc .tc-kicker span { display: none; }
  :is(.cards, .cv-head) .tc .tc-name { font-size: .8rem; }
  :is(.cards, .cv-head) .tc .tc-strip { font-size: .56rem; }
  :is(.cards, .cv-head) .tc .tc-hp { display: none; }
  :is(.cards, .cv-head) .tc .tc-type { width: 1.35rem; height: 1.35rem; }
  :is(.cards, .cv-head) .tc .tc-type .picto { width: .85rem; height: .85rem; }
  :is(.cards, .cv-head) .tc .tc-art { min-height: 0; }
  :is(.cards, .cv-head) .tc .tc-art .ring { height: 1.3rem; min-width: 1.7rem; font-size: .58rem; right: auto; left: .3rem; }
  :is(.cards, .cv-head) .tc .gemb { display: none; }
  :is(.cards, .cv-head) .tc .tc-pal, :is(.cards, .cv-head) .tc .tc-insets, :is(.cards, .cv-head) .tc .tc-why { display: none; }
  :is(.cards, .cv-head) .tc .tc-slots { gap: 2px; }
  :is(.cards, .cv-head) .tc .tc-sl { border-radius: 5px; }
  :is(.cards, .cv-head) .tc .tc-mo { padding: .1rem .25rem; }
  :is(.cards, .cv-head) .tc .mo-lbl { display: none; }
  :is(.cards, .cv-head) .tc .tc-f { font-size: .45rem; }
  :is(.cards, .cv-head) .tc .tc-sp { display: none; }
  :is(.cards, .cv-head) .tc .tc-acts { top: 2.2rem; right: .5rem; opacity: 1; }
  :is(.cards, .cv-head) .tc .prtb, :is(.cards, .cv-head) .tc .cmpb, :is(.cards, .cv-head) .tc .pickb { width: 1.45rem; height: 1.45rem; font-size: .75rem; }
}

/* ==========================================================================
   CUADERNO: TUS CARTAS
   ========================================================================== */

.fc-wrap { position: relative; gap: .4rem; }
.fc-acts { position: absolute; top: 2.9rem; right: .75rem; z-index: 4; display: flex; gap: .25rem; opacity: 0; transition: opacity .15s ease; }
.fc-wrap:hover .fc-acts, .fc-acts:has(.on), .fc-acts:focus-within { opacity: 1; }
.fcb {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 246, 238, .95);
  border: 1px solid rgba(43, 38, 32, .3);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.fcb:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.fcb.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fc-cap { display: flex; align-items: center; gap: .4rem; min-height: 1.3rem; padding: 0 .2rem; font-size: .8rem; color: var(--ink-2); }
.fc-st { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-st.ok { color: var(--ok); font-weight: 600; }
.fc-ic { color: var(--muted); display: inline-flex; }
@media (max-width: 860px) {
  .fc-acts { opacity: 1; top: 2.3rem; right: .45rem; }
  .fcb { width: 1.55rem; height: 1.55rem; }
}

/* ==========================================================================
   PLIEGO: LAS CARTAS A TAMAÑO REAL TAMBIÉN EN PANTALLA (lo que ves es lo que sale)
   ========================================================================== */

.prt-sheet { overflow-x: auto; }
.prt-sheet.prt-poker .prt-grid { grid-template-columns: repeat(3, 63mm); grid-auto-rows: 88mm; gap: 0; justify-content: center; }
.prt-sheet.prt-field .prt-grid { grid-template-columns: repeat(2, 90mm); grid-auto-rows: 128mm; gap: 3mm; justify-content: center; }
.prt-sheet.prt-fold .prt-fold-grid { align-items: center; }
.prt-sheet.prt-fold.prt-poker .prt-pair { grid-template-columns: 63mm 63mm; grid-auto-rows: 88mm; padding: 0; }
.prt-sheet.prt-fold.prt-field .prt-pair { grid-template-columns: 90mm 90mm; grid-auto-rows: 128mm; padding: 0; }
.prt-pair .prt-cell:first-child, .prt-pair .prt-cell:last-child { padding: 0; }
.prt-cell { min-width: 0; min-height: 0; }
.prt-wrap.with-marks .prt-cell { padding: 0; }
.prt-cell .tc { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 3mm; }
.prt-cell .tc-acts, .prt-cell .tc-scan { display: none; }

/* letra y huecos de la carta de 63 × 88 mm (pantalla e impresora) */
.prt-poker .prt-cell .tc-face { padding: 1.8mm 2mm 1.4mm; gap: .9mm; }
.prt-poker .prt-cell .tc-h { min-height: 0; gap: 1mm; padding-bottom: .8mm; }
.prt-poker .prt-cell .tc-kicker { font-size: 4.4pt; }
.prt-poker .prt-cell .tc-kicker span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prt-poker .prt-cell .tc-name { font-size: 8.4pt; }
.prt-poker .prt-cell .tc-strip { font-size: 5.2pt; }
.prt-poker .prt-cell .tc-hp { font-size: 5pt; padding: .3mm .8mm; margin-top: 0; }
.prt-poker .prt-cell .tc-type { width: 5mm; height: 5mm; margin-top: 0; }
.prt-poker .prt-cell .tc-type .picto { width: 3.3mm; height: 3.3mm; }
.prt-poker .prt-cell .tc-art { flex: 1 1 0; min-height: 12mm; border-radius: 1.5mm; }
.prt-poker .prt-cell .tc-art .ring, .prt-poker .prt-cell .gemb, .prt-poker .prt-cell .tc-why { display: none; }
.prt-poker .prt-cell .tc-pal { padding: .3mm .8mm; }
.prt-poker .prt-cell .tc-pal i { width: 1.6mm; height: 1.6mm; }
.prt-poker .prt-cell .tc-insets img { width: 5mm; height: 5mm; }
.prt-poker .prt-cell .tc-slots { flex: none; gap: .3mm; }
.prt-poker .prt-cell .tc-sl { padding: .3mm .9mm; gap: .8mm; }
.prt-poker .prt-cell .tc-sl .sl-ic { width: 3.1mm; height: 3.1mm; }
.prt-poker .prt-cell .sl-k { font-size: 3.9pt; }
.prt-poker .prt-cell .sl-v { font-size: 5.4pt; }
.prt-poker .prt-cell .tc-mo { padding: .3mm .8mm; gap: .8mm; }
.prt-poker .prt-cell .mo-lbl { font-size: 3.8pt; }
.prt-poker .prt-cell .mo-c i { height: 1.7mm; }
.prt-poker .prt-cell .mo-c small { font-size: 3.4pt; }
.prt-poker .prt-cell .tc-f { font-size: 4.4pt; padding-top: .4mm; }
/* reverso de 63 mm: descripción, medidas y fenología (especies); lugar, notas y diagnosis (tus cartas) */
.prt-poker .prt-cell .tc-back { padding: 1.8mm 2mm 1.4mm; gap: .9mm; justify-content: flex-start; }
.prt-poker .prt-cell .tb-h { padding-bottom: .8mm; }
.prt-poker .prt-cell .tb-kicker { font-size: 4.4pt; }
.prt-poker .prt-cell .tb-name { font-size: 8.2pt; }
.prt-poker .prt-cell .tb-cn { font-size: 5.4pt; }
.prt-poker .prt-cell .tb-no { font-size: 4.8pt; padding: .2mm .7mm; }
.prt-poker .prt-cell .tb-desc { font-size: 5.6pt; line-height: 1.3; -webkit-line-clamp: 9; }
.prt-poker .prt-cell .tb-m, .prt-poker .prt-cell .tb-sec, .prt-poker .prt-cell .tb-where { padding: .6mm 1mm; border-radius: 1.2mm; }
.prt-poker .prt-cell .tb-mi small, .prt-poker .prt-cell .tb-loc-item small { font-size: 3.8pt; }
.prt-poker .prt-cell .tb-mi b, .prt-poker .prt-cell .tb-loc-item b { font-size: 5.2pt; }
.prt-poker .prt-cell .tb-sec-t { font-size: 4.2pt; margin-bottom: .4mm; }
.prt-poker .prt-cell .tb-sec-t .ico { width: 2.4mm; height: 2.4mm; }
.prt-poker .prt-cell .tb-photos, .prt-poker .prt-cell .tb-map-row { display: none; }
.prt-poker .prt-cell .tb-extra { padding: .6mm 1mm; border-radius: 1.2mm; }
.prt-poker .prt-cell .tb-grid { gap: .2mm 1.2mm; }
.prt-poker .prt-cell .tb-tr-i { font-size: 4.8pt; padding-bottom: .2mm; }
.prt-poker .prt-cell .tb-tr-i small { font-size: 4.2pt; }
.prt-poker .prt-cell .tb-where { flex: none; }
.prt-poker .prt-cell .tb-where .mchart { height: 7mm; }
.prt-poker .prt-cell .tb-where .mchart small { font-size: 3.4pt; }
.prt-poker .prt-cell .tb-notes-sec { flex: 1 1 auto; min-height: 10mm; background-size: 100% 3.2mm; }
.prt-poker .prt-cell .tb-notes-print { font-size: 5.6pt; line-height: 3.2mm; }
.prt-poker .prt-cell .tb-morph-sec .tb-desc { -webkit-line-clamp: 4; }
.prt-poker .prt-cell .tb-f { font-size: 4.2pt; padding-top: .4mm; margin-top: auto; }

/* cabecera de la carta en una sola línea: código a la izquierda, familia o lugar a la derecha */
.tc-kicker { min-width: 0; }
.tc-kicker span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-kicker b { flex: 0 1 auto; max-width: 58%; }
.tc-scan ~ .tc-pal { display: none; }

/* bandeja del comparador: una sola fila; en el móvil, de lado a lado y con desplazamiento */
.tray-in { flex-wrap: nowrap; }
.tray-item .sp-thumb.xs { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.tray-item .latin { white-space: nowrap; }
@media (max-width: 860px) {
  .tray { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; border-radius: 14px; padding: .5rem .6rem; }
  .tray-in { overflow-x: auto; scrollbar-width: none; }
  .tray-title, .tray-hint, .tray .link { display: none; }
  .tray-item { flex: none; }
  .tray .btn { flex: none; margin-left: auto; }
}

/* rendimiento: las cartas fuera de la pantalla no se maquetan ni se pintan hasta que se acercan (su alto sale de
   la proporción 63:88), así el mosaico responde al instante al tocar un rasgo */
.cards .tc, .ptiles .ptile { content-visibility: auto; contain-intrinsic-size: auto 400px; }
.ptiles .ptile { contain-intrinsic-size: auto 150px; }

/* Explorar: cabecera sin cifra grande; fichas de lo marcado a la izquierda, vista y orden a la derecha */
.xp-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.xp-bar .achips { flex: 1 1 auto; min-width: 0; }
.xp-bar select { padding: .35rem .6rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); font-size: .8rem; }
.xp-hint { margin: 0; color: var(--ink-2); font-size: .92rem; }

/* comparador: cada columna con su color (el mismo de sus barras de medidas) */
.cv-c::before { content: ''; display: block; height: 4px; border-radius: 2px; background: var(--c, var(--line-2)); margin: 0 18% .45rem; }
.cv-keys { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: -.2rem 0 .5rem; font-size: .82rem; }
.cv-key { display: inline-flex; align-items: center; gap: .35rem; }
.cv-key i { width: .8rem; height: .8rem; border-radius: 3px; }
.tray-item.you { background: rgba(216, 190, 140, .22); }
/* con la bandeja abajo, el final de la página no queda tapado */
body.has-tray #main { padding-bottom: 6rem; }
/* avisos con el mismo icono en todas partes */
.fh-toxic .ico, .lab-warn .ico, .warn > .ico { margin-right: .35rem; vertical-align: -2px; flex: none; }

/* los iconos de línea van dentro del texto (la regla general «svg { display: block }» los partía en otra línea) */
.ico { display: inline-block; vertical-align: -.16em; }
.tc-kicker b { display: inline-flex; align-items: center; gap: .15rem; }
.tc-kicker b .ico, .tc-sp .ico { width: 1.1em; height: 1.1em; }
.tc-sp { display: inline-flex; align-items: center; gap: .2rem; }
.xp-tools { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-left: auto; flex: 0 1 auto; min-width: 0; }
.tray-item span { white-space: nowrap; }
.tray .x { color: rgba(255, 255, 255, .75); font-size: .8rem; padding: 0 .1rem; }
.tray .x:hover { color: #fff; }

/* reverso de tu carta: dónde y cuándo en dos líneas, y un único texto */
.tb-place { display: grid; gap: .2rem; font-size: .78rem; }
.tb-place > span { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; min-width: 0; }
.tb-place .ico { color: var(--c2); flex: none; }
.tb-place small { font-size: .66rem; color: var(--muted); }
.tc-back .tb-notes-sec { padding: .3rem .4rem; }
.tc-back .tb-notes-ed { min-height: 7rem; border-style: solid; border-color: rgba(51, 43, 34, .18); background: rgba(255, 255, 255, .7); font-size: .74rem; }
.tb-auto { display: flex; align-items: center; gap: .3rem; margin-top: .3rem; font-size: .66rem; color: var(--ai); line-height: 1.25; }
.tb-auto .link { font-size: .66rem; display: inline-flex; align-items: center; gap: .25rem; color: var(--ai); }
.prt-poker .prt-cell .tb-place { font-size: 5.4pt; gap: .4mm; }
.prt-poker .prt-cell .tb-place small { font-size: 4.6pt; }
.sp-map .tmap { border-radius: 10px; overflow: hidden; }

@media (max-width: 860px) {
  /* bandeja: el botón «Comparar» siempre a la vista, aunque haya muchas */
  .tray .btn { position: sticky; right: 0; box-shadow: -10px 0 12px var(--forest-dark); }
  /* «mira este rasgo»: icono y frase en la misma línea */
  .nexttip { flex-wrap: nowrap; align-items: flex-start; }
  .nexttip > .picto { margin-top: .15rem; }
  /* comparador: sin la columna de la leyenda, las cartas de dos en dos y cada fila con su rasgo encima */
  .cv-top { flex-wrap: wrap; gap: .4rem; }
  .cv-head { grid-template-columns: repeat(var(--n, 2), minmax(160px, 1fr)); gap: .5rem; }
  .cv-head > .cv-lab { display: none; }
  .cv-ca { flex-wrap: wrap; }
  .cv-row, .cv-mrow { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .cv-cells { grid-template-columns: repeat(var(--n, 2), minmax(120px, 1fr)); gap: .35rem; }
}

/* foto sin seta: aviso destacado (no se proponen especies) */
.nofungus { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1rem; padding: .85rem 1rem; border-radius: var(--r); background: var(--warn-bg); border: 1px solid rgba(148, 89, 20, .35); color: var(--ink); }
.nofungus > .ico { width: 1.6rem; height: 1.6rem; color: var(--warn); flex: none; margin-top: .1rem; }
.nofungus b { font-family: var(--serif); font-size: 1.08rem; }
.nofungus p { margin: .25rem 0 .55rem; color: var(--ink-2); font-size: .9rem; }
.lab-info.nofungus { display: flex; margin: 0 .8rem .55rem; }
.nofungus-more { margin: 1rem 0; }
.nofungus-more > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); padding: .5rem 0; }
.nofungus-more > summary small { font-weight: 400; color: var(--muted); margin-left: .4rem; }
.fh-q { display: flex; gap: .4rem; align-items: flex-start; margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.fh-q .ico { margin-top: .15rem; flex: none; }

/* ==========================================================================
   MÓVIL SIN DESBORDAMIENTO LATERAL (nada más ancho que la pantalla)
   ========================================================================== */

/* botones de cada candidata: se reparten en varias líneas y el largo puede encoger */
.la-act { flex-wrap: wrap; }
.la-act > * { min-width: 0; }
.la-act .btn { flex: 1 1 auto; overflow: hidden; }
.la-act .btn, .la-act .tool { white-space: nowrap; text-overflow: ellipsis; }
.la-bars, .la-season { min-width: 0; overflow: hidden; }
@media (max-width: 860px) {
  /* las rejillas de una columna no crecen más que la pantalla por lo que llevan dentro */
  .xp, .sp2, .cp2-grid, .fw2 { grid-template-columns: minmax(0, 1fr); }
  .xp > *, .cp2-grid > *, .fw2 > *, .cp2-card, .fw2-card { min-width: 0; }
  .wb-side-bar .seg { max-width: 100%; overflow-x: auto; }
  /* las pestañas se deslizan: un difuminado en el borde avisa de que hay más */
  .tabs { padding-right: 2.2rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent); }
}
@media (max-width: 520px) {
  /* candidatas de tu carta: una por fila, para que sus 10 iconos se lean */
  .cards.la2-grid { grid-template-columns: minmax(0, 1fr); }
  .cards.la2-grid .tc { max-width: 360px; margin: 0 auto; }
}
.cp2-go { flex-wrap: wrap; min-width: 0; }
.cp2-go .btn.big { white-space: normal; max-width: 100%; }

/* familias: el collage no pasa de su altura (antes las fotos crecían y tapaban el nombre); el texto, debajo */
.collage { overflow: hidden; flex: none; grid-template-rows: minmax(0, 1fr); }
.collage.n3 { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.collage img { min-height: 0; min-width: 0; }
.fam-n b { font-family: var(--serif); font-size: 1.15rem; }
.fam-n small { color: var(--muted); white-space: nowrap; }
.prt-status { align-self: center; font-size: .8rem; color: var(--ok); font-weight: 600; }
.prt-status.busy { color: var(--muted); font-weight: 500; }
.prt-status.busy::before { content: ''; display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; vertical-align: -1px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }

/* análisis en curso: cronómetro y «Cancelar» */
.busy-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .6rem .3rem 0; }
.busy-clock { display: inline-flex; align-items: baseline; gap: .5rem; }
.busy-t { font: 700 1.1rem var(--mono); color: var(--ink); }
.busy-clock small { color: var(--muted); font-size: .78rem; }
.tc-scan-b { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.tc-scan-b > b { background: rgba(23, 35, 26, .88); color: #faf6ee; font-size: .72rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--gold-accent); }
.tc-scan .busy-clock { background: rgba(23, 35, 26, .8); color: #faf6ee; padding: .15rem .5rem; border-radius: 999px; }
.tc-scan .busy-t { color: #faf6ee; font-size: .8rem; }
.tc-scan .busy-clock small { color: rgba(250, 246, 238, .75); font-size: .64rem; }
.nofungus.err { background: var(--danger-bg); border-color: rgba(158, 42, 37, .35); }
.nofungus.err > .ico { color: var(--danger); }
.tc-scan .busy-t { background: none; border: 0; padding: 0; }
.lib-tools { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.tc-hp.sp { font-style: italic; border-style: dashed; }

/* fecha en castellano; el calendario del navegador se abre al tocarla */
.date-ui { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .75rem; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; cursor: pointer; font-weight: 500; }
.date-ui:hover, .date-ui:focus-within { border-color: var(--accent); }
.date-ui b { font-weight: 600; }
.date-ui .ico { color: var(--muted); }
.date-ui input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* comparador vacío o con una sola carta */
.cv-vs { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.cv-vs i { width: 2.4rem; height: 3.3rem; border: 2px solid var(--card-border); border-radius: 6px; background: linear-gradient(180deg, var(--accent-soft), var(--paper-card)); box-shadow: var(--shadow-sm); }
.cv-vs i:first-child { transform: rotate(-8deg); }
.cv-vs i:last-child { transform: rotate(8deg); }
.cv-vs b { font: 900 1.05rem var(--sans); color: #fff; background: linear-gradient(135deg, #d6403a, #8a1f17); padding: .3rem .4rem; border-radius: 8px; transform: rotate(-6deg); }
.cv-one { text-align: center; max-width: 560px; }
.cv-one .cv-one-card { max-width: 300px; margin: 1rem auto; }
/* las marcas ✓/✗ de cada celda se colocan respecto a su celda (sin esto se salían de la página por la derecha) */
.cv-cell { position: relative; }

/* meses de la carta legibles en pantalla (9 px como mínimo); en papel siguen como estaban. Especificidad baja a
   propósito: en la vista previa del pliego mandan las medidas de impresión (.prt-poker .prt-cell …) */
@media screen {
  .mo-lbl { font-size: clamp(9px, 2.2vw, 12px); }
  .mo-c small { font-size: clamp(9px, 2.2vw, 12px); }
  .mo-c i { height: 8px; }
  .tc-mo { padding-top: .2rem; padding-bottom: .2rem; }
}

/* ==========================================================================
   APP DE CAMPO: UNA MANO, GUANTES, LUZ MALA
   Toda la carta del mosaico es un enlace; en el móvil, barra de pestañas abajo, «Nueva seta» al alcance
   del pulgar y nada que se toque mide menos de 44 px. Solo en pantalla: al imprimir un A4 (también
   «estrecho») no cambia nada.
   ========================================================================== */

:root { --navh: 62px; }
.tc-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.tc-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tc-menu, .tab-more, .fab, .more-sheet, .act-sheet { display: none; }
.more-sheet svg, .fab svg { fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

@media screen and (max-width: 860px) {
  /* --- barra de pestañas abajo: Cuaderno · Explorar · Buscar · Familias · Más */
  body { padding-bottom: calc(var(--navh) + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding: .45rem .9rem; }
  .btn.newfind { display: none; }
  .topbar .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
    width: auto; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); overflow: visible;
    background: var(--forest-dark); border-top: 1px solid rgba(216, 190, 140, .28); box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
    -webkit-mask-image: none; mask-image: none;
  }
  .topbar .tabs a.m-sec { display: none; }
  .topbar .tabs a, .tab-more {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--navh); padding: 6px 2px; border: 0; border-radius: 0; background: none; box-shadow: none;
    color: rgba(244, 239, 228, .74); font-size: .7rem; font-weight: 600;
  }
  .topbar .tabs a span, .tab-more span { font-size: .7rem; }
  .topbar .tabs a svg, .tab-more svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
  .tab-more svg { fill: currentColor; stroke: none; }
  .topbar .tabs a.on, .tab-more.on, .tab-more[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 3px 0 var(--gold-accent); }
  .topbar .tabs a b, .tab-more b { position: absolute; top: 5px; left: calc(50% + 7px); font-family: var(--mono); font-size: .62rem; font-weight: 700; padding: .02rem .32rem; border-radius: 999px; background: var(--terra); color: #fff; }
  .tab-more b:empty { display: none; }
  .more-sheet:not([hidden]) {
    display: grid; gap: 2px; position: fixed; right: 8px; bottom: calc(var(--navh) + 8px + env(safe-area-inset-bottom, 0px)); z-index: 70;
    min-width: 240px; padding: 6px; background: var(--card); border: 1.5px solid var(--card-border); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  }
  .more-sheet a { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: 0 .9rem; border-radius: 10px; color: var(--ink); font-weight: 600; }
  .more-sheet a:hover, .more-sheet a:focus-visible { background: var(--bg-2); color: var(--ink); }
  .more-sheet a svg { width: 22px; height: 22px; flex: none; }
  .more-sheet a b { margin-left: auto; font: 700 .7rem var(--mono); padding: .05rem .4rem; border-radius: 999px; background: var(--terra); color: #fff; }

  /* --- «Nueva seta», abajo a la derecha, por encima de la barra (y de la bandeja de comparar) */
  .fab {
    display: grid; place-items: center; position: fixed; right: 16px; z-index: 55;
    bottom: calc(var(--navh) + 16px + env(safe-area-inset-bottom, 0px));
    width: 60px; height: 60px; border-radius: 50%; background: var(--terra); color: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .32), 0 0 0 3px rgba(250, 246, 238, .92);
  }
  .fab:hover, .fab:active { background: var(--terra-dark); color: #fff; }
  .fab svg { width: 28px; height: 28px; }
  body.no-fab .fab { display: none; }
  body.has-tray .fab { bottom: calc(var(--navh) + 88px + env(safe-area-inset-bottom, 0px)); }
  body:not(.no-fab) #main { padding-bottom: 96px; }
  .tray { bottom: calc(var(--navh) + 8px + env(safe-area-inset-bottom, 0px)); }
  .toast { left: 12px; right: 12px; bottom: calc(var(--navh) + 14px + env(safe-area-inset-bottom, 0px)); text-align: center; }

  /* --- acciones de una carta: un solo botón grande que abre un menú (en vez de tres botoncitos) */
  .tc-acts, .fc-acts { display: none; }
  .tc-menu {
    display: grid; place-items: center; position: absolute; top: 2px; right: 2px; z-index: 4;
    width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--ink);
    background: radial-gradient(circle, rgba(250, 246, 238, .96) 0 15px, transparent 16px);
  }
  .tc-menu .ico { width: 20px; height: 20px; }
  .fc-wrap { position: relative; }
  .fc-menu { top: 4px; right: 4px; }
  .act-sheet {
    display: grid; gap: 2px; position: fixed; left: 8px; right: 8px; bottom: calc(var(--navh) + 8px + env(safe-area-inset-bottom, 0px)); z-index: 75;
    padding: 6px; background: var(--card); border: 1.5px solid var(--card-border); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
  }
  .act-h { padding: .55rem .9rem .35rem; font-weight: 700; color: var(--ink-2); }
  .act-sheet a, .act-sheet button { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: 0 .9rem; border-radius: 10px; color: var(--ink); font-weight: 600; text-align: left; }
  .act-sheet a:hover, .act-sheet button:hover { background: var(--bg-2); color: var(--ink); }
  .act-sheet .ico { width: 22px; height: 22px; }

  /* --- nada que se toque por debajo de 44 px de alto */
  .brand, .crumb, .btn, .tool, .seg button, .ntag, .tchip, .qopt, .achip, .kchip, .tl-row, .prt-fchip, .date-ui, .lg,
  .nexttip, .mb-more, summary, select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="date"]),
  .pk-q, .lab-more-h input, .fh-add, .cp2-add, .gm-b, .la-fix { min-height: 44px; }
  .crumb, .link, .lg { display: inline-flex; align-items: center; }
  .link { min-height: 44px; padding-left: .35rem; padding-right: .35rem; }
  p .link, .muted .link { min-height: 0; }
  summary { display: flex; align-items: center; }
  .x { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  .kchip button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .mb-sl, .mb-ph { width: 46px; height: 46px; }
  .gm-b { width: 44px; }
  .gm-row { grid-template-columns: 24px minmax(0, 1fr) 10px 44px 44px; }
  .tc-pk .pk-o { min-height: 46px; }
  .tc-pk .pk-or { position: static; align-self: stretch; min-width: 44px; height: auto; border-radius: 0 9px 9px 0; border-width: 0 0 0 1px; }
  .seg { flex-wrap: wrap; }
  .tray .btn { min-height: 44px; }
}

@media screen and (max-width: 860px) {
  .tc-menu { width: 46px; height: 46px; top: 1px; right: 1px; }
  .fstatus a, .crumbs a, .fviews a { display: inline-flex; align-items: center; min-height: 44px; }
  .prt-chk { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
  .prt-chk input { width: 22px; height: 22px; }
  .rm { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  /* cabecera de tu carta: diámetro, tipo y color se tocan en 44 px sin que cambie lo que se ve (el borde
     transparente agranda la diana; el filete visible pasa a sombra interior) */
  .tc-hp.edit { border: 12px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px rgba(51, 43, 34, .24); margin: -12px -12px -12px -7px; min-height: 46px; }
  .tc-type.edit { box-sizing: content-box; border: 8.5px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1.2px var(--c2); margin: -8.5px; }
  .tc-pal.edit { min-width: 44px; min-height: 46px; border: 13px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px rgba(43, 38, 32, .28); right: calc(.32rem - 13px); bottom: calc(.32rem - 13px); }
  .tc-up .tc-pal.edit { margin: -6px -6px -13px; } /* la diana de 44 px no invade los botones vecinos (separación de .45rem) */
}
@media screen and (max-width: 860px) {
  .topbar .tabs a[data-tab="buscar"] { order: 3; }
  .topbar .tabs a[data-tab="familias"] { order: 4; }
  .tab-more { order: 5; }
}
/* en papel, el terracota de siempre (el más oscuro es por el contraste en pantalla): el PDF no cambia */
@media print { :root { --terra: #b85328; } }

/* ==========================================================================
   CUADERNO DE TRABAJO: dos datos (temporada y herbario) y tus hallazgos, el más nuevo primero
   ========================================================================== */

.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: .2rem 0 1rem; }
.hh-t h1 { margin: 0; }
.hh-n { margin: .25rem 0 0; font: 500 .78rem var(--mono); color: var(--muted); }
.hh-acts { display: flex; gap: .5rem; }
.hh-c { font: 700 .66rem var(--mono); padding: .02rem .36rem; border-radius: 999px; background: var(--terra); color: #fff; }

.dpanel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.dpanel a { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 52px; padding: .5rem 1rem; color: var(--ink-2); }
.dpanel a + a { border-left: 1px solid var(--line); }
.dpanel a:hover { background: var(--bg-2); color: var(--ink); }
.dp-k { font: 600 .64rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.dp-v { font-size: .92rem; }
.dp-v b { color: var(--ink); }
.dp-go { display: inline-flex; color: var(--muted); transform: scaleX(-1); }

.lib-head h2 { margin: 0; }
.fc-stat { flex: none; display: inline-flex; align-items: center; gap: .3rem; font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fc-stat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fc-stat.st-identified { color: var(--ok); }
.fc-stat.st-unsure { color: var(--warn); }
.fc-stat.st-nofungus::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.fc-cap .fc-st em { color: var(--ink); }

.lib-backup { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: 2.4rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.lib-backup > .muted { font: 600 .64rem var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-right: .3rem; }

.log-empty { margin: 0; padding: 2.2rem 1rem; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-2); font-size: 1rem; }
.log-empty p { margin: 0 0 .9rem; }
.btn.newfind-inline { background: var(--terra); border-color: var(--terra-dark); }
.btn.newfind-inline:hover:not(:disabled) { background: var(--terra-dark); }
.btn.newfind-inline svg { width: 18px; height: 18px; }

/* temporada (#/temporada) */
.season-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .1rem 0 .7rem; }
.season-nav b { font-family: var(--serif); font-size: 1.2rem; min-width: 7rem; text-align: center; }
.ico-fwd { display: inline-flex; transform: scaleX(-1); }
.season-n { margin: 0 0 .25rem; font-size: 1.02rem; color: var(--ink-2); }
.season-n b { font-family: var(--mono); color: var(--ink); }
.season .sx-top { margin-bottom: 1.2rem; }

/* herbario (#/herbario): un registro, una especie por línea */
.hb-head { margin-bottom: 1rem; }
.hb-head h1 { margin: 0 0 .2rem; }
.hb-n { margin: 0 0 .2rem; font-size: 1.02rem; }
.hb-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; padding: .7rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.hb-f { display: grid; gap: .25rem; min-width: 0; }
.hb-f > span { font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hb-f select { width: 100%; min-width: 0; padding: .45rem .55rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper-card); color: var(--ink); font: inherit; font-size: .88rem; }
.hb-shown { margin: -.3rem 0 .8rem; font-size: .85rem; color: var(--muted); }
.hb-cols, .hb-row { display: grid; grid-template-columns: 64px minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1.6fr) auto; gap: .9rem; align-items: center; }
.hb-cols { padding: 0 .8rem .4rem; font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1.5px solid var(--card-border); }
.hb-list { list-style: none; margin: 0; padding: 0; }
.hb-row { padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.hb-ph { display: block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.hb-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-id { display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; color: var(--ink); }
.hb-id b { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.2; }
.hb-id span { font-size: .8rem; color: var(--muted); }
.hb-id:hover b { color: var(--accent); }
.hb-rar { font-size: .84rem; color: var(--ink-2); white-space: nowrap; }
.hb-rar b { font-family: var(--mono); margin-right: .1rem; }
.hb-finds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hb-finds a { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; font: 500 .8rem var(--mono); color: var(--ink-2); }
.hb-finds a:hover { color: var(--accent); }
.hb-finds .ico { width: 14px; height: 14px; flex: none; color: var(--muted); }
.hb-finds span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media screen and (max-width: 860px) {
  .home-head { align-items: center; margin-bottom: .8rem; }
  .hh-acts .tool { padding-left: .7rem; padding-right: .7rem; }
  .dpanel { grid-template-columns: 1fr; margin-bottom: 1.1rem; }
  .dpanel a { grid-template-columns: 5.6rem minmax(0, 1fr) auto; padding: .45rem .8rem; gap: .6rem; }
  .dpanel a + a { border-left: 0; border-top: 1px solid var(--line); }
  .dp-v { font-size: .86rem; }
  .fc-cap { flex-wrap: wrap; row-gap: 0; }
  .fc-cap .fc-st { order: 3; flex-basis: 100%; }
  .log-empty .newfind-inline { display: none; } /* en el móvil está el botón redondo de abajo */
  .hb-tools { grid-template-columns: 1fr 1fr; padding: .6rem; }
  .hb-cols { display: none; }
  .hb-row { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "ph id" "ph rar" "fi fi"; gap: .1rem .8rem; padding: .7rem .1rem; }
  .hb-ph { grid-area: ph; align-self: start; }
  .hb-id { grid-area: id; min-height: 44px; }
  .hb-rar { grid-area: rar; }
  .hb-finds { grid-area: fi; flex-direction: row; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
  .hb-finds a { min-height: 44px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
  .hb-sheet { display: none; } /* el nombre ya abre la ficha */
  .season-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; flex-wrap: nowrap; }
  .season-nav .tool { justify-content: center; padding: 0; }
  .season-nav .tool > span:not(.ico-fwd) { display: none; } /* en el móvil, solo las flechas (con su nombre para el lector) */
}

/* ==========================================================================
   REVERSO DE TU CARTA: RÓTULO DE PLIEGO DE HERBARIO
   Etiqueta (lugar, coordenadas, fecha, hábitat), medidas y caracteres en monoespaciada con su fuente, y la
   nota de campo en serif sobre la pauta. Las claves de los dos bloques comparten columna: todo alinea.
   ========================================================================== */

.tb-label { --keyw: 3.4rem; justify-content: flex-start; gap: .4rem; }
.tb-label .tb-cn { font-weight: 500; }
.tb-lab { display: grid; grid-template-columns: var(--keyw) minmax(0, 1fr); align-items: baseline; gap: .12rem .5rem; margin: 0; font-size: .7rem; line-height: 1.3; color: var(--ink); }
.tb-lab dt, .tb-tab .tb-k, .tb-thead { font: 600 .5rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tb-lab dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tb-lab .mono { font-family: var(--mono); font-size: .64rem; }
/* medidas: una rejilla por fila (clave · valor · fuente), alineadas por la línea base como la etiqueta */
.tb-tab { font: 500 .62rem/1.3 var(--mono); color: var(--ink); border-top: 1.2px solid var(--c2); border-bottom: 1px solid rgba(67, 56, 42, .28); }
.tb-tr { display: grid; grid-template-columns: var(--keyw) minmax(0, 1fr) auto; align-items: baseline; column-gap: .5rem; padding: .07rem 0; }
.tb-tr + .tb-tr:not(.tb-thead + .tb-tr) { border-top: 1px dotted rgba(67, 56, 42, .22); }
.tb-thead { grid-template-columns: minmax(0, 1fr) auto; padding: .2rem 0 .1rem; color: var(--c2); font-weight: 700; }
.tb-tab .tb-src { color: var(--muted); font-size: .5rem; text-transform: uppercase; letter-spacing: .06em; text-align: right; white-space: nowrap; }
.tb-label .tb-notes-sec { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: .15rem 0 0; border: 0; border-top: 1px solid rgba(67, 56, 42, .28); border-radius: 0;
  background: linear-gradient(transparent calc(100% - 1px), rgba(67, 56, 42, .16) 0) 0 0 / 100% 16px repeat-y content-box; } /* pauta de cuaderno */
.tb-label .tb-tab { border-bottom: 0; }
.tb-label .tb-f { border-top: 0; }
.tb-label .tb-notes-print, .tb-label .tb-notes-ed { font-family: var(--serif); }
.tb-label .tb-notes-print { font-size: .7rem; line-height: 16px; }
.tb-label .tb-f b { font-family: var(--mono); }
.tc-status { font-weight: 600; }

/* a tamaño real (63 × 88 mm, en pantalla y en papel) */
.prt-poker .prt-cell .tb-label { --keyw: 9.4mm; gap: .9mm; }
.prt-poker .prt-cell .tb-lab { font-size: 5.4pt; gap: .25mm 1.4mm; }
.prt-poker .prt-cell .tb-lab dt, .prt-poker .prt-cell .tb-tab .tb-k, .prt-poker .prt-cell .tb-thead { font-size: 3.9pt; }
.prt-poker .prt-cell .tb-lab .mono { font-size: 5pt; }
.prt-poker .prt-cell .tb-tab { font-size: 4.9pt; border-top-width: .3mm; }
.prt-poker .prt-cell .tb-tr { column-gap: 1.4mm; padding: .2mm 0; }
.prt-poker .prt-cell .tb-thead { padding: .5mm 0 .3mm; }
.prt-poker .prt-cell .tb-tab .tb-src { font-size: 3.9pt; }
.prt-poker .prt-cell .tb-label .tb-notes-sec { min-height: 0; padding: .4mm 0 0; border-radius: 0; background-size: 100% 3.2mm; background-position: 0 0; }
.prt-poker .prt-cell .tb-label .tb-notes-print { font-size: 5.8pt; line-height: 3.2mm; }
.tb-label .tb-notes-print.cut { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
/* reverso de una especie: mismo idioma que tu rótulo (medidas en monoespaciada, descripción en serif) */
.tb-species .tb-desc { font-family: var(--serif); font-size: .7rem; line-height: 1.4; color: var(--ink); }
.tb-species .tb-tab { border-bottom: 1px solid rgba(67, 56, 42, .28); }
.tb-species .tb-tr { grid-template-columns: var(--keyw) minmax(0, 1fr); }
.tb-species .tb-thead { grid-template-columns: 1fr; }
.tb-species .tb-f { border-top: 1px solid rgba(67, 56, 42, .2); margin-top: auto; }
.prt-poker .prt-cell .tb-species .tb-desc { font-size: 5.6pt; line-height: 1.32; }
.tb-species .tb-extra, .tb-species .tb-where, .prt-poker .prt-cell .tb-species .tb-extra, .prt-poker .prt-cell .tb-species .tb-where {
  background: none; border: 0; border-top: 1px solid rgba(67, 56, 42, .28); border-radius: 0; padding: .2rem 0 0;
}
.prt-poker .prt-cell .tb-species .tb-extra, .prt-poker .prt-cell .tb-species .tb-where { padding: .5mm 0 0; }
.tb-species .tb-tab + .tb-extra, .tb-species .tb-tab + .tb-where { border-top: 0; }

/* ==========================================================================
   ICONOS: UN SOLO SISTEMA
   · De línea (ico, core.js): trazo de 1,85; verde bosque en los botones claros y el color del texto en los
     botones llenos, la barra de pestañas y los avisos.
   · Pictogramas (picto.js): colores de seta y contorno sepia (variables en :root), nunca siluetas negras.
   · Lo que sale de Gemini sin confirmar: la estrella, siempre en el marrón de la IA.
   · Qué es cada uno: el globo de tips.js (ratón encima, o tocar / mantener pulsado) y la leyenda de la carta.
   ========================================================================== */

.tool .ico, .crumb .ico, .link .ico { color: var(--accent); }
.tool.danger .ico { color: var(--danger); }
.tool:disabled .ico { color: inherit; }
.ai-mk { color: var(--ai); fill: currentColor; stroke-width: 1.2; width: .9em; height: .9em; margin-right: .22em; }
.btn .ai-mk { color: inherit; }
.sl-ai .ai-mk, .pt-gem .ai-mk { display: block; width: .62rem; height: .62rem; margin: 0; }

#tip {
  position: fixed; left: 0; top: 0; z-index: 90;
  max-width: min(17rem, calc(100vw - 16px));
  display: flex; flex-direction: column; gap: .08rem;
  padding: .42rem .65rem .48rem;
  background: var(--forest-dark); color: #f4efe4;
  border: 1px solid rgba(216, 190, 140, .45); border-radius: 9px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  font: 500 .8rem/1.35 var(--sans);
  pointer-events: none;
}
#tip[hidden] { display: none; }
#tip small { font: 700 .6rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-accent); }
#tip b { font-weight: 600; }
#tip span { font-size: .74rem; color: rgba(244, 239, 228, .78); }
#tip::after {
  content: ''; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; border: inherit; border-width: 0 1px 1px 0; border-radius: 0 0 2px 0; transform: rotate(45deg);
}
#tip.below::after { bottom: auto; top: -6px; border-width: 1px 0 0 1px; border-radius: 2px 0 0 0; }
@media (prefers-reduced-motion: no-preference) { #tip:not([hidden]) { animation: tip-in .12s ease-out; } }
@keyframes tip-in { from { opacity: 0; } }

/* táctil: mantener pulsado no selecciona texto ni abre el menú del enlace o de la imagen */
@media (hover: none) {
  .tc, .fc-wrap, .tool, .btn, .tc-sl { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* leyenda: cómo leer la carta (en el móvil, hoja desde abajo) */
dialog.cardkey { width: min(560px, 94vw); padding: 1.1rem 1.25rem 1.3rem; --c1: #eae3d4; --c2: #675e4f; }
.ck h2 { margin: 0; font: 600 1.3rem/1.2 var(--serif); }
.ck-how { margin: .15rem 0 .7rem; font-size: .88rem; color: var(--ink-2); }
.ck section { padding: .7rem 0 .15rem; border-top: 1px solid var(--line); }
.ck h3 { margin: 0 0 .35rem; font: 700 .68rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ck-sub { margin: 0 0 .55rem; font-size: .8rem; color: var(--muted); }
.ck-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem .4rem; }
.ck-grid li { display: flex; flex-direction: column; align-items: center; gap: .22rem; text-align: center; }
.ck-grid .tc-sl { width: 100%; max-width: 3.3rem; }
.ck-grid small { font-size: .74rem; line-height: 1.15; color: var(--ink-2); }
.ck-r { display: grid; grid-template-columns: 3.1rem 1fr; align-items: center; gap: .7rem; padding: .28rem 0; font-size: .86rem; line-height: 1.35; }
.ck-s { display: flex; justify-content: center; }
.ck-s .tc-sl { width: 2.7rem; }
.ck-s .tc-hp, .ck-s .tc-type { margin: 0; }
.ck-s .tc-hp { font-size: .8rem; }
.ck-s .tc-hp small { font-size: .68rem; }
.ck-ring { min-width: 2.05rem; height: 1.5rem; padding: 0 .4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(23, 35, 26, .9); border: 1.5px solid var(--gold-accent); font: 700 .7rem var(--mono); color: #faf6ee; }
.ck-mo { display: flex; align-items: flex-end; gap: 2px; height: 1.1rem; }
.ck-mo i { width: 6px; height: 35%; border-radius: 1.5px; background: var(--c2); opacity: .55; }
.ck-mo i.pk { height: 100%; background: var(--accent); opacity: 1; }
.ck-mo i.nw { height: 62%; background: var(--terra); opacity: 1; }
.ck-sp { display: inline-flex; align-items: center; gap: .2rem; font: 600 .72rem var(--mono); color: var(--ink-2); }
.ck-rar { font-size: 1.05rem; color: var(--ink-2); }
@media (max-width: 860px) {
  dialog.cardkey {
    width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0;
    max-height: 88dvh; overflow-y: auto; padding-bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px));
  }
}
/* con nombre, los botones de tu carta caben en una fila del móvil */
@media (max-width: 480px) {
  .fh-top { gap: .5rem; }
  .fh-top .tool { padding-left: .7rem; padding-right: .7rem; }
}
/* candidatas: «Asignar» a lo ancho y, debajo, «Comparar» y «Descartar» a partes iguales */
@media (max-width: 480px) {
  .la-act { display: grid; grid-template-columns: 1fr 1fr; }
  .la-act .btn { grid-column: 1 / -1; }
}

/* ==========================================================================
   RONDA 5 · MÓVIL: IDENTIFICAR PRIMERO
   ========================================================================== */

/* cámara: «Hacer foto» solo donde hay dedo (y casi siempre cámara); con ratón, el selector de siempre */
@media (pointer: fine) { .cam-only { display: none !important; } }
@media (pointer: coarse) { .no-cam { display: none !important; } }
.tc-art.empty { cursor: default; }
.tc-art.empty:hover { background: rgba(255, 255, 255, 0.65); }
.tc-up { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .35rem; }
.tc-up label { cursor: pointer; }
/* sin foto, el color del sombrero va en la fila de los botones (flotando encima los pisaba en cartas estrechas) */
.tc-up .tc-pal { position: static; align-self: center; }
.tc-art.empty .tc-drop-ring { flex-shrink: 0; }
@media (max-width: 420px) { .tc-art.empty .tc-gps { display: none; } }
@media (max-width: 340px) {
  .tc-art.empty small { display: none; }
  .tc-art.empty .tc-drop-ring { width: 2.4rem; height: 2.4rem; }
}

/* cabecera del hallazgo: lo principal a la vista; reanalizar, empezar de cero y borrar, aparte */
.fh-main, .fh-side { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fh-side { padding-left: .65rem; border-left: 1px solid var(--line); }
.fh-opts { display: none; }
.tool.danger { color: var(--danger); border-color: #e3b9b5; }
.act-sheet .danger, .act-sheet .danger:hover { color: var(--danger); }
@media screen and (max-width: 860px) {
  .fh-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; }
  .fh-top .spacer, .fh-side { display: none; }
  .fh-opts { display: inline-flex; grid-row: 1; grid-column: 2; }
  .fid .sec-h .eyebrow-tag { display: none; }
  .fh-top .crumb { margin: 0; }
  .fh-main { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .fh-main > :nth-child(3) { grid-column: 1 / -1; }
}

/* dos pestañas: Identificar · Carta y datos */
.fh-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 1rem; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.fh-tabs button {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i t' 'i s'; align-items: center; column-gap: .55rem;
  min-height: 52px; padding: .4rem .8rem; border: 0; border-radius: 10px; background: none; color: var(--ink-2); text-align: left; cursor: pointer;
}
.fh-tabs button .ico { grid-area: i; width: 1.25rem; height: 1.25rem; color: var(--muted); }
.fh-tabs button span { grid-area: t; font-weight: 700; font-size: .95rem; line-height: 1.15; }
.fh-tabs button small { grid-area: s; font: 500 .74rem/1.2 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.fh-tabs button[aria-selected="true"] .ico { color: var(--accent); }
.fh-tabs button:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .45); }

/* Identificar: tu seta en una línea, la mejor candidata y las candidatas */
.fid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
.fid > .fsec, .fid > details { grid-column: 1 / -1; }
.fid-you { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: .3rem .75rem; margin-bottom: .9rem; }
.fid-ph { width: 3.5rem; height: 3.5rem; padding: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--muted); cursor: pointer; }
.fid-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fid-t { display: flex; flex-direction: column; min-width: 0; }
.fid-t b { font: 600 1.15rem/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fid-t small { color: var(--muted); font-size: .8rem; }
.fid-you .fh-status { grid-column: 1 / -1; margin: .2rem 0 0; }
.fid-sum { margin-bottom: 1.2rem; }
/* en el móvil, tu seta en una línea; con sitio, tu carta al lado de la mejor candidata */
.fid-card { display: none; }
@media (min-width: 1000px) {
  .fid { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
  .fid-you { display: none; }
  .fid-card { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; grid-column: 1; grid-row: 1; }
  .fid-card .tc { width: 100%; }
  .fid-sum { grid-column: 2; grid-row: 1; }
}

/* una sola mejor candidata */
.bc { display: flex; flex-direction: column; gap: .3rem; }
.bc-k { font: 700 .68rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.bc-name { margin: 0; font: 600 1.3rem/1.25 var(--serif); }
.bc-name small { font: 500 .85rem var(--sans); color: var(--muted); }
.bc-p { display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: var(--forest-dark); color: #faf6ee; font: 700 .78rem/1.4 var(--mono); vertical-align: .2em; }
.bc-why { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.bc-more { margin: .15rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.fid-sum .fh-q, .fid-sum .fh-toxic { margin-top: .7rem; }
.fid-sum .fh-status { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.la2-acts { margin-top: .8rem; }
.bc-go { align-self: flex-start; margin-top: .35rem; }
.bc-name a { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   RONDA 6: grados de confianza, familia en la carta, edición con «Editar» y candidatas en filas
   ========================================================================== */

/* grado de confianza: la palabra y cuatro marcas (tantas llenas como su nivel), la misma escala en toda la web */
.grade { display: inline-flex; align-items: center; gap: .36rem; padding: .17rem .52rem .17rem .42rem; border: 1px solid; border-radius: 999px; font: 700 .72rem/1.2 var(--sans); letter-spacing: .01em; white-space: nowrap; vertical-align: middle; animation: gradeIn .22s ease-out both; }
.gm4 { display: inline-flex; gap: 2px; }
.gm4 b { width: 4px; height: 10px; border-radius: 1.5px; background: currentColor; opacity: .22; }
.gm4 b.on { opacity: 1; }
.g-seguro { background: var(--accent); border-color: var(--accent); color: #f6f1e6; }
.g-probable { background: var(--accent-soft); border-color: rgba(40, 75, 49, .45); color: var(--accent-2); }
.g-posible { background: #f5ead0; border-color: rgba(148, 89, 20, .4); color: #74450f; }
.g-dudoso { background: #ece6da; border-color: rgba(110, 101, 88, .45); border-style: dashed; color: #5f574b; }
.grade.lg { padding: .26rem .66rem .26rem .52rem; font-size: .84rem; }
.grade.lg .gm4 b { width: 5px; height: 12px; }
.grade.xs { gap: .24rem; padding: .07rem .38rem .07rem .3rem; font-size: .64rem; }
.grade.xs .gm4 b { width: 3px; height: 8px; }
.tc-art .grade { position: absolute; top: .35rem; right: .35rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.ptile .pt-g { position: absolute; top: .35rem; right: .35rem; }
@keyframes gradeIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  :is(.cards, .cv-head) .tc .tc-art .grade { top: .3rem; right: auto; left: .3rem; gap: .22rem; padding: .06rem .34rem .06rem .28rem; font-size: .56rem; }
  :is(.cards, .cv-head) .tc .tc-art .grade .gm4 b { width: 3px; height: 7px; }
}

/* la familia en la cara de la carta: versalitas, como el rótulo de un pliego, bajo el nombre en serif itálica */
.tc-fam { font: 600 .76rem/1.12 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .07em; color: color-mix(in srgb, var(--c2) 55%, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-fam i { font-variant-caps: normal; letter-spacing: 0; }
.tc-lg .tc-fam { font-size: .82rem; }
@media (max-width: 560px) { :is(.cards, .cv-head) .tc .tc-fam { font-size: .64rem; } }
.prt-poker .prt-cell .tc-fam { font-size: 6pt; }
.tb-fam { margin-top: 0; }
.tb-fam small { color: var(--muted); }
.fam-lab, .fam-sc { font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: .06em; font-weight: 600; }
.fam-sc { font-weight: 600; font-size: .86rem; color: var(--ink-2); }

/* encabezado del hallazgo: el grado y una frase prudente; debajo, las señales en palabras */
.bc-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; font: 500 1.14rem/1.45 var(--serif); }
.bc-name .grade { align-self: center; }
.bc-line { flex: 1 1 15rem; min-width: 0; }
.bc-name .bc-line a { display: inline; min-height: 0; padding: .62rem 0; }
.bc-name .bc-line a em { font-weight: 600; }
.bc-fam { display: block; margin-top: .1rem; font: 500 .92rem/1.3 var(--sans); color: var(--ink-2); }
.bc-ev { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .1rem 0 .15rem; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.bc-ev i { color: var(--ink-2); font-family: var(--serif); font-weight: 600; }

/* candidatas: una fila para decidir de un vistazo; al desplegarla, su carta, el porqué y las acciones */
.cand-list { display: flex; flex-direction: column; gap: .5rem; }
.cand { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); transition: border-color .18s ease, box-shadow .18s ease; }
.cand.best { border-color: rgba(40, 75, 49, .55); box-shadow: inset 4px 0 0 var(--accent), var(--shadow-sm); }
.cand.chosen { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok), var(--shadow-sm); }
.cand-s { list-style: none; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: .7rem; min-height: 72px; padding: .55rem .7rem .55rem .8rem; border-radius: inherit; cursor: pointer; }
.cand-s::-webkit-details-marker { display: none; }
.cand-s:hover { background: rgba(255, 255, 255, .45); }
.cand-s:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cand-ph .sp-thumb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--bg-2); }
.cand-ph .sp-thumb .picto { width: 30px; height: 30px; }
.cand-t { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.cand-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.cand-n em { font: italic 600 1.02rem/1.2 var(--serif); color: var(--ink); }
.cand-n .tc-tag { position: static; display: inline-flex; align-items: center; gap: .2rem; }
.cand-n .tc-tag .ico { width: 12px; height: 12px; }
.cand-1 { font: 700 .6rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.cand-f { display: flex; flex-wrap: wrap; gap: 0 .5rem; color: var(--muted); font-size: .78rem; line-height: 1.3; }
.cand-ev { display: flex; flex-wrap: wrap; gap: 0 .55rem; color: var(--muted); font-size: .73rem; line-height: 1.35; }
.cand-ev .lv2 { color: var(--ok); }
.cand-g { display: flex; align-items: center; gap: .3rem; }
.cand-chev .ico { display: block; width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.cand[open] .cand-chev .ico { transform: rotate(180deg); }
.cand-b { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 1.1rem; padding: .3rem .9rem 1rem; animation: candIn .2s ease-out; }
.cand-card .tc { width: 100%; }
.cand-k { margin: .2rem 0 .35rem; font: 700 .66rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cand-why { display: flex; flex-direction: column; gap: .32rem; margin: 0 0 .7rem; padding: 0; list-style: none; font-size: .88rem; }
.cand-why li { display: flex; align-items: center; gap: .45rem; }
.cand-why b { min-width: 4.3rem; color: var(--ink); font-weight: 600; }
.lvd { flex: none; width: .6rem; height: .6rem; border: 1.5px solid currentColor; border-radius: 50%; }
.cand-why .lv2 { color: var(--ok); }
.cand-why .lv2 .lvd { background: currentColor; }
.cand-why .lv1 { color: var(--ink-2); }
.cand-why .lv1 .lvd { color: var(--accent); background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.cand-why .lv0 { color: var(--muted); }
.cand-info .la-act { display: flex; flex-wrap: wrap; gap: .45rem; margin: .6rem 0 .2rem; }
@media (max-width: 700px) {
  .cand-b { grid-template-columns: minmax(0, 1fr); padding: .2rem .7rem .9rem; }
  .cand-card { width: 100%; max-width: 330px; margin: 0 auto; }
}
@keyframes candIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* lo que vio Gemini: la seguridad, con la misma palabra que el resto */
.gm-row { grid-template-columns: 26px minmax(0, 190px) minmax(0, 1fr) auto 30px 30px; }
@media (max-width: 760px) { .gm-row { grid-template-columns: 24px minmax(0, 1fr) auto 30px 30px; } }
.qai .grade { margin-left: .2rem; }

/* editar tu carta: solo tras pulsar «Editar»; mientras, la carta se ve sin cambiar por accidente */
.fid-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
.edit-b .ico { width: 15px; height: 15px; }
.edit-hint { display: flex; align-items: flex-start; gap: .5rem; max-width: 356px; margin: 0; padding: .55rem .75rem; border: 1px dashed var(--accent); border-radius: 12px; background: var(--accent-soft); color: var(--ink-2); font-size: .84rem; line-height: 1.4; animation: candIn .2s ease-out; }
.edit-hint > .ico { flex: none; width: 16px; height: 16px; margin-top: .15rem; color: var(--accent); }
.fw2-card .edit-hint { margin: 0 auto .6rem; }
.editing .tc.mine { box-shadow: inset 0 0 0 3px var(--paper-card), 0 0 0 3px var(--accent-soft), 0 0 0 4.5px var(--accent), var(--shadow-card); }
.tc-sl.locked { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .grade, .cand-b, .edit-hint { animation: none; }
  .cand-chev .ico, .cand { transition: none; }
}
.cand-ev .cand-gm { display: none; }
@media (max-width: 700px) {
  .cand-s { grid-template-columns: 52px minmax(0, 1fr) auto; gap: .6rem; padding: .5rem .55rem .5rem .65rem; }
  .cand-ph .sp-thumb { width: 52px; height: 52px; }
  .cand-ev { align-items: center; gap: .1rem .45rem; }
  .cand-ev .cand-gm { display: inline-flex; }
  .cand-g .cand-gd { display: none; }
}
/* la barra de la carta: «Editar», las caras y «Leyenda»; en el móvil, las caras en su propia fila */
.wb-side-bar { flex-wrap: wrap; }
.wb-side-bar .seg { flex: 0 0 auto; }
.wb-side-bar .seg button { white-space: nowrap; }
@media (max-width: 560px) {
  .wb-side-bar .seg { order: 3; flex: 1 0 100%; display: flex; }
  .wb-side-bar .seg button { flex: 1; }
}
/* al asignar la especie, la carta se ilumina un momento con su nombre y su familia nuevos */
.tc.mine.just-id { animation: justId 1.4s ease-out; }
@keyframes justId { 0% { box-shadow: 0 0 0 0 rgba(216, 190, 140, .9), var(--shadow-card); } 100% { box-shadow: 0 0 0 14px rgba(216, 190, 140, 0), var(--shadow-card); } }
@media (prefers-reduced-motion: reduce) { .tc.mine.just-id { animation: none; } }
/* rasgos de Wikipedia en la ficha, con sus frases */
.wp-cites { margin: .2rem 0 .6rem; color: var(--muted); }
.wp-cites summary { display: block; cursor: pointer; line-height: 1.45; }
.wp-cites summary > * { display: inline; }
.wp-cites li a { white-space: nowrap; }
.wp-cites ul { margin: .4rem 0; padding-left: 1.1rem; color: var(--ink-2); }
.wp-cites li { margin: .2rem 0; }

/* fotos adicionales más grandes: en el anverso (sobre la foto principal) y en el reverso */
.tc-insets { gap: .28rem; }
.tc-insets img { width: 2.3rem; height: 2.3rem; }
.tc-lg .tc-insets img { width: 2.9rem; height: 2.9rem; border-width: 2px; border-radius: 5px; }
.tc-insets button { display: block; padding: 0; border: 0; background: none; border-radius: 5px; cursor: pointer; }
.tc-insets button img { display: block; }
.tc-insets button:hover img, .tc-insets button:focus-visible img { border-color: var(--gold-accent); }
.prt-poker .prt-cell .tc-insets img { width: 7mm; height: 7mm; }
.tb-photos figure { height: auto; aspect-ratio: 4 / 3; max-height: 92px; }
/* la principal, marcada; editando, las demás se tocan para ponerlas de principal */
.fw2-ths button.main { border-color: var(--accent); }
.ph-main { position: absolute; left: 0; right: 0; bottom: 0; padding: .05rem 0; background: rgba(23, 35, 26, .78); color: #f6f1e6; font: 700 .52rem/1.3 var(--sans); text-align: center; letter-spacing: .02em; }
.editing .fw2-ths button[data-act="f-cover"] { border-style: dashed; border-color: var(--accent); }

/* tus datos (pie del cuaderno): dónde están las cartas, la copia y la limpieza */
.lib-backup { flex-direction: column; align-items: stretch; gap: .55rem; }
.lb-where { display: flex; gap: .6rem; align-items: flex-start; }
.lb-where > .ico { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .12rem; color: var(--accent); }
.lb-where p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.lb-where b { color: var(--ink); }
.lb-stat { margin: 0 0 0 1.75rem; font: 600 .74rem var(--mono); color: var(--muted); }
.lb-nudge { display: flex; gap: .45rem; align-items: flex-start; margin: 0; padding: .5rem .7rem; border-radius: 9px; background: var(--warn-bg); font-size: .84rem; line-height: 1.4; }
.lb-nudge .ico { width: 1rem; height: 1rem; flex: none; margin-top: .12rem; color: var(--warn); }
.lb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 560px) {
  .lb-acts .spacer { display: none; }
  .lb-acts > * { flex: 1 1 calc(50% - .5rem); }
}

/* «Seleccionar» en el cuaderno: la carta entera se marca; la barra dice cuántas y borra */
.lib-head > .tool { margin-left: .4rem; }
.pick-bar { position: sticky; top: calc(var(--top-h, 56px) + .4rem); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; margin: 0 0 .9rem; padding: .55rem .7rem; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(17, 32, 20, .14); }
.pick-bar b { font-size: .9rem; }
.fc-pick { display: flex; flex-direction: column; gap: .4rem; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.fc-pick > :first-child { border-radius: 14px; transition: transform .15s ease, box-shadow .15s ease; }
.picking.on .fc-pick > :first-child { transform: scale(.97); box-shadow: 0 0 0 3px var(--danger); }
.fc-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 14px; }
.fc-pick .fc-cap { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; min-height: 44px; }
.pick-ck { width: 1.7rem; height: 1.7rem; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--card); border: 2px solid var(--line-2); color: transparent; }
.pick-ck .ico { width: 1.1rem; height: 1.1rem; stroke-width: 2.6; }
.picking.on .pick-ck { background: var(--danger); border-color: var(--danger); color: #fff; }
.picking .fc-st { min-width: 0; font-size: .86rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picking.on .fc-st { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .pick-bar b { flex: 1 1 100%; }
  .pick-bar .spacer { display: none; }
  .pick-bar button { flex: 1 1 auto; min-height: 44px; }
}
.btn.danger-btn { background: var(--danger); border-color: #7d1f1b; }
.btn.danger-btn:hover:not(:disabled) { background: #7d1f1b; }

/* borrar cartas: se pierden para siempre, y lo dice */
dialog.del-dlg { width: min(470px, 94vw); padding: 1.1rem 1.2rem 1.15rem; }
.dd h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font: 600 1.25rem/1.25 var(--serif); }
.dd h2 .ico { width: 1.3rem; height: 1.3rem; flex: none; color: var(--danger); }
.dd-ths { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .75rem; }
.dd-ths img, .dd-ths .noimg, .dd-more { width: 2.6rem; height: 2.6rem; border-radius: 6px; object-fit: cover; background: var(--card-2); border: 1px solid var(--line); }
.dd-ths .noimg, .dd-more { display: grid; place-items: center; font: 700 .74rem var(--mono); color: var(--muted); }
.dd-ths .noimg .picto { width: 1.5rem; height: 1.5rem; }
.dd-warn { margin: 0 0 .65rem; padding: .6rem .75rem; border-radius: 9px; background: var(--danger-bg); color: var(--ink); font-size: .9rem; line-height: 1.45; }
.dd-warn b { color: var(--danger); }
.dd-bk { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin: 0 0 .7rem; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.dd-bk > .ico { width: 1.05rem; height: 1.05rem; flex: none; color: var(--ok); }
.dd-ok { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .9rem; padding: .55rem .65rem; border-radius: 9px; border: 1px solid var(--line-2); font-size: .88rem; line-height: 1.4; cursor: pointer; }
.dd-ok input { width: 1.15rem; height: 1.15rem; margin: .1rem 0 0; flex: none; accent-color: var(--danger); }
.dd .dialog-actions .tool, .dd .dialog-actions .btn { min-height: 44px; }
@media (max-width: 560px) {
  dialog.del-dlg { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; padding-bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px)); }
  .dd .dialog-actions { flex-direction: column-reverse; }
  .dd .dialog-actions > * { width: 100%; }
}

/* análisis que quedan hoy (límite por conexión) */
.quota { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin: .45rem 0 0; font-size: .84rem; color: var(--ink-2); }
.quota b { color: var(--ink); font-variant-numeric: tabular-nums; }
.quota small { font-size: .74rem; color: var(--muted); }
.quota.low b { color: var(--warn); }
.quota.out { align-items: flex-start; padding: .5rem .65rem; border-radius: 9px; background: var(--warn-bg); color: var(--ink); line-height: 1.4; }
.quota.out .ico { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; color: var(--warn); }
@media (max-width: 560px) { .lib-head > .tool { margin-left: 0; } }

/* «Acerca de»: el sello completo junto al título */
.about-head { display: flex; align-items: center; gap: .6rem 1.1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.about-head h1 { margin: 0; }
.about-seal { width: 132px; height: 132px; transform: rotate(-6deg); flex-shrink: 0; }
@media (max-width: 560px) { .about-seal { width: 96px; height: 96px; } }