/* HATARJA 2.0 — v0.3 */

:root {
  --tan: #DFD7AF;
  --tan-deep: #CEC392;
  --stone: #A8A8A8;
  --paper: #F6F3E9;
  --paper-2: #EEE8D8;
  --white: #FFFFFF;
  --ink: #222521;
  --muted: #646860;
  --forest: #4E5D4D;
  --forest-dark: #394639;
  --line: #D7D3C4;
  --radius-lg: 28px;
  --radius-md: 22px;
  --shadow: 0 20px 50px rgba(38, 41, 36, 0.09);
  --container: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

a { color: inherit; }


/* Cabecera flotante global para la arquitectura modular */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* El header visual se mantiene dentro del contenedor sticky */
#site-header .site-header {
  position: relative;
  top: auto;
}

.container {
  width: min(calc(100% - 32px), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  transform: translateY(-180%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: white;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    linear-gradient(90deg,
      rgba(241, 242, 234, 0.98) 0%,
      rgba(235, 238, 225, 0.96) 62%,
      rgba(184, 194, 160, 0.28) 100%);
  border-bottom: 1px solid rgba(215, 211, 196, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 22px rgba(34, 37, 33, 0.035);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(78, 93, 77, 0.18) 14%,
    rgba(78, 93, 77, 0.72) 50%,
    rgba(223, 215, 175, 0.65) 78%,
    transparent 100%);
  pointer-events: none;
}

.nav-wrap {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-symbol {
  width: 52px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-symbol img {
  width: 58px;
  max-width: none;
}

.brand-copy { display: grid; line-height: 1.03; }
.brand-copy strong {
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #3F443B 0%, #7B6947 55%, #A18D5E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-copy small {
  margin-top: 6px;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #D2C79A 0%, #A99360 45%, #6F5E3E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.menu-toggle {
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
}
.menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.main-nav {
  position: absolute;
  top: calc(100% + 1px);
  left: 16px;
  right: 16px;
  display: none;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.main-nav.is-open { display: grid; }
.main-nav a {
  position: relative;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 720;
  letter-spacing: 0.015em;
  transition: color 160ms ease, background-color 160ms ease;
}

.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--forest), var(--tan-deep));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 170ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--forest-dark);
  background: rgba(78, 93, 77, 0.16);
}

.main-nav a:not(.nav-cta):hover::after,
.main-nav a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
}
.main-nav .nav-cta {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  color: white;
  box-shadow: 0 7px 16px rgba(57,70,57,0.13);
}

.hero {
  overflow: hidden;
  padding: 30px 0 22px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.28), transparent 24%),
    linear-gradient(180deg, #DFD7AF 0%, #E8E2C2 100%);
  border-bottom: 1px solid rgba(34,37,33,0.05);
}
.hero-grid {
  display: grid;
  gap: 20px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--forest-dark);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
h1,h2,h3,p { margin-top: 0; }
h1 {
  max-width: 14ch;
  margin-bottom: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 7.8vw, 4.35rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 600;
}
h2 {
  margin-bottom: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4.8vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
}
h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
  line-height: 1.15;
}
.hero-lead {
  max-width: 58ch;
  margin-bottom: 18px;
  color: #4F514C;
  font-size: clamp(0.98rem, 2.3vw, 1.08rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}
.button-primary {
  background: var(--forest-dark);
  color: white;
}
.button-primary:hover { background: #2F392F; }
.button-ghost {
  border: 1px solid rgba(34,37,33,0.24);
  background: rgba(255,255,255,0.16);
}

.hero-brand {
  display: grid;
  place-items: center;
}
.hero-brand-inner {
  width: min(100%, 360px);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px 0;
  background: transparent;
}

.hero-shield {
  width: min(84%, 230px);
  filter: drop-shadow(0 14px 24px rgba(34,37,33,0.12));
}
.hero-brand-caption {
  margin-top: 4px;
  text-align: center;
}
.hero-brand-caption span {
  display: block;
  font-size: 0.88rem;
  font-weight: 850;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.hero-brand-caption small {
  display: block;
  margin-top: 4px;
  color: #66675F;
  font-size: 0.74rem;
}

.section { padding: 30px 0 48px; }
.cards-section { padding-top: 26px; }

.card-grid {
  display: grid;
  gap: 14px;
}

.feature-card {
  position: relative;
  min-height: 252px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 8px 24px rgba(34,37,33,0.045);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.card-number {
  align-self: flex-start;
  min-width: 42px;
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
  color: var(--stone);
  font-size: 0.75rem;
  font-weight: 850;
}
.card-content { margin-top: auto; }
.card-kicker {
  margin-bottom: 8px;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.feature-card p { color: var(--muted); }
.feature-card a {
  display: inline-flex;
  gap: 6px;
  margin-top: 8px;
  text-decoration: none;
  font-weight: 850;
}
.feature-card-tan {
  background: linear-gradient(180deg, #E3DCAF 0%, #DAD0A1 100%);
  border-color: rgba(34,37,33,0.10);
}
.feature-card-photo {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.52), transparent 30%),
    linear-gradient(145deg, #D9DFD2 0%, #AAB6A2 100%);
  border-color: rgba(57,70,57,0.12);
}
.feature-card-dark {
  background: var(--ink);
  color: white;
  border-color: transparent;
}
.feature-card-dark .card-number,
.feature-card-dark .card-kicker,
.feature-card-dark p {
  color: rgba(255,255,255,0.68);
}
.feature-card-dark a { color: var(--tan); }
.feature-card-outline {
  background: transparent;
  border: 1.5px solid var(--stone);
}

.mini-brand {
  padding-top: 4px;
}
.mini-brand-grid {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: transparent;
}
.mini-brand-mark {
  min-height: 120px;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.mini-brand-mark img {
  width: min(86%, 205px);
  opacity: 1;
  filter: none;
}
.mini-brand-copy p:last-child { margin-bottom: 0; color: var(--muted); }

.site-footer {
  padding: 34px 0;
  background: var(--ink);
  color: white;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.footer-brand {
  display: grid;
  gap: 2px;
}
.footer-brand strong {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-brand span {
  color: rgba(255,255,255,0.58);
  font-size: 0.8rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-links a {
  color: rgba(255,255,255,0.76);
  text-decoration: none;
}

@media (min-width: 680px) {
  .container { width: min(calc(100% - 56px), var(--container)); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-brand-grid { grid-template-columns: 0.40fr 1fr; gap: 28px; }
  .footer-grid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 980px) {
  .menu-toggle { display: none; }
  .main-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .main-nav a { padding: 9px 12px; font-size: 0.91rem; }
  .main-nav .nav-cta { margin-left: 6px; padding-inline: 17px; }

  .hero {
    min-height: calc(100vh - 78px);
    min-height: calc(100svh - 78px);
    display: grid;
    align-items: center;
    padding: 34px 0;
  }
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 40px; }
  .hero-brand-inner { min-height: 220px; }
  .hero-shield { width: min(84%, 245px); }

  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 34px 0 62px; }
  .cards-section { padding-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* =========================================================
   HATARJA v_1 — ARQUITECTURA MODULAR
   ========================================================= */

.main-nav a.is-active {
  font-weight: 850;
}

.page-hero {
  padding: 50px 0 36px;
  border-bottom: 1px solid var(--line);
}

.page-hero-inner {
  max-width: 850px;
}

.page-hero h1 {
  max-width: 15ch;
  margin-bottom: 18px;
}

.page-lead {
  max-width: 65ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.12rem);
}

.page-content {
  padding-top: 44px;
}

.content-shell {
  max-width: 900px;
}

.content-placeholder {
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,0.54);
}

.content-placeholder h2 {
  font-size: clamp(1.8rem, 4.4vw, 3rem);
}

@media (min-width: 980px) {
  .page-hero {
    padding: 62px 0 44px;
  }
}


/* v_2: hover más visible */
.main-nav .nav-cta:hover,
.main-nav .nav-cta:focus-visible {
  color: white;
  filter: brightness(0.88);
}


/* v_2 — microinteracción del escudo de cabecera */
.brand-symbol img {
  transition:
    transform 320ms cubic-bezier(.2,.72,.25,1),
    filter 320ms ease;
  transform-origin: 50% 50%;
  will-change: transform;
}

.brand:hover .brand-symbol img,
.brand:focus-visible .brand-symbol img {
  transform: perspective(260px) rotateY(18deg) rotateZ(-2deg) scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .brand-symbol img {
    transition: none;
  }

  .brand:hover .brand-symbol img,
  .brand:focus-visible .brand-symbol img {
    transform: none;
  }
}


/* =========================================================
   HATARJA v_2 — PÁGINA LEGAL UNIFICADA
   ========================================================= */
.legal-page-hero {
  padding-bottom: 30px;
}

.legal-page-hero h1 {
  max-width: 18ch;
}

.legal-updated {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.legal-sheet {
  max-width: 980px;
  padding: clamp(26px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,0.58);
  box-shadow: 0 18px 48px rgba(0,0,0,0.045);
}

.legal-sheet p,
.legal-sheet li {
  line-height: 1.78;
}

.legal-sheet p {
  margin: 0 0 1.05em;
}

.legal-sheet ul {
  margin: 0.7em 0 1.35em;
  padding-left: 1.35em;
}

.legal-sheet li + li {
  margin-top: 0.42em;
}

.legal-index {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.legal-index a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 760;
  background: rgba(255,255,255,0.56);
}

.legal-section {
  scroll-margin-top: 100px;
}

.legal-section + .legal-section {
  margin-top: 54px;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}

.legal-section h2 {
  margin: 0 0 24px;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.02;
}

.legal-section h3 {
  margin: 30px 0 12px;
  font-size: clamp(1.12rem, 2vw, 1.36rem);
}

.legal-pending {
  margin: 0 0 32px;
  padding: 18px 20px;
  border: 1px dashed currentColor;
  border-radius: 16px;
  font-size: 0.94rem;
}

.legal-pending strong {
  display: block;
  margin-bottom: 5px;
}

.legal-data {
  margin: 18px 0 26px;
  padding: 0;
  list-style: none;
}

.legal-data li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.legal-data li:first-child {
  border-top: 1px solid var(--line);
}

.legal-table-wrap {
  margin: 22px 0 28px;
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.legal-table th,
.legal-table td {
  padding: 13px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  font-weight: 800;
  background: rgba(255,255,255,0.54);
}

.legal-note {
  margin: 22px 0;
  padding: 17px 19px;
  border-left: 4px solid currentColor;
  background: rgba(255,255,255,0.40);
}

.legal-top-link {
  display: inline-block;
  margin-top: 22px;
  font-weight: 740;
  text-decoration: none;
}

.legal-sheet a {
  text-underline-offset: 3px;
}

@media (max-width: 679px) {
  .legal-sheet {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .legal-section + .legal-section {
    margin-top: 42px;
    padding-top: 38px;
  }
}


/* v_2 — alineación exacta de la navegación interna legal */
.legal-index {
  align-items: stretch;
}

.legal-index li {
  display: flex;
  margin: 0;
  padding: 0;
}

.legal-index a {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}


/* v_2 — datos de contacto protegidos frente a harvesters simples */
.protected-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.protected-reveal {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.62);
  color: inherit;
  font: inherit;
  font-size: 0.92em;
  font-weight: 760;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.protected-reveal:hover,
.protected-reveal:focus-visible {
  background: rgba(255,255,255,0.92);
  transform: translateY(-1px);
}

.protected-value {
  font-weight: 760;
  overflow-wrap: anywhere;
}

.contact-email-card {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.48);
}

.contact-email-card h3 {
  margin-top: 0;
}


/* v_2 — contacto con identidad visual */
.contact-intro {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 26px;
}

.contact-intro .eyebrow {
  margin-bottom: 8px;
}

.contact-intro h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.contact-icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 24px;
}

.contact-icon svg {
  width: 70px;
  height: 70px;
  display: block;
}

.contact-intro--nature .contact-icon {
  color: #756443;
  background:
    linear-gradient(145deg, rgba(210,199,154,0.60), rgba(184,194,160,0.48));
  border: 1px solid rgba(117,100,67,0.20);
}

.contact-intro--pro .contact-icon {
  color: #F06A16;
  background:
    linear-gradient(145deg, rgba(255,100,28,0.10), rgba(34,34,34,0.08));
  border: 1px solid rgba(255,100,28,0.22);
}

.contact-email-card {
  margin-top: 18px;
}

@media (max-width: 620px) {
  .contact-intro {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-icon {
    width: 84px;
    height: 84px;
  }

  .contact-icon svg {
    width: 62px;
    height: 62px;
  }
}

/* Corrección definitiva: los tres botones legales deben compartir la misma línea */
.legal-index {
  align-items: center;
}

.legal-index li,
.legal-index li + li {
  display: flex;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
  align-items: center;
}

.legal-index a {
  height: 40px;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}



/* v_2 — segundo ajuste de compactación de páginas interiores */
.page-hero {
  padding: 20px 0 15px;
}

.page-hero-inner {
  max-width: 730px;
}

.page-hero h1 {
  max-width: 18ch;
  margin-bottom: 9px;
  font-size: clamp(1.72rem, 3.55vw, 2.72rem);
  line-height: 0.98;
}

.page-lead {
  max-width: 58ch;
  font-size: clamp(0.90rem, 1.55vw, 0.98rem);
  line-height: 1.45;
}

@media (min-width: 980px) {
  .page-hero {
    padding: 24px 0 19px;
  }
}

/* v_2 — pie final más compacto */
.site-footer {
  padding: 11px 0;
}

.footer-grid {
  gap: 8px;
}

.footer-brand {
  gap: 1px;
}

.footer-brand strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.05;
}

.footer-brand span {
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.05;
}

.footer-links {
  line-height: 1.1;
}

/* Identidad de Ocio y Naturaleza repetida en el pie */
.footer-brand strong {
  background: linear-gradient(90deg, #3F443B 0%, #7B6947 55%, #A18D5E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-brand span {
  background: linear-gradient(90deg, #D2C79A 0%, #A99360 45%, #6F5E3E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* =========================================================
   HATARJA v_3 — SUBMENÚ LATERAL DE SECCIÓN
   ========================================================= */
.section-layout {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.section-layout > .content-shell {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.section-subnav {
  position: sticky;
  top: calc(var(--site-header-height, 78px) + 16px);
  align-self: start;
  z-index: 40;
}

.section-subnav-inner {
  padding: 15px 13px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.035);
}

.section-subnav-kicker {
  margin: 0 0 4px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-subnav-title {
  display: block;
  margin-bottom: 11px;
  font-size: 0.86rem;
  line-height: 1.15;
}

.section-subnav-links {
  display: grid;
  gap: 5px;
}

.section-subnav-links a {
  position: relative;
  display: block;
  padding: 8px 9px 8px 14px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 690;
  line-height: 1.2;
  transition: background 160ms ease, transform 160ms ease;
}

.section-subnav-links a::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.34;
}

.section-subnav-links a:hover,
.section-subnav-links a:focus-visible {
  transform: translateX(2px);
}

.section-subnav-links a.is-active {
  font-weight: 820;
}

.section-subnav-links a.is-active::before {
  width: 5px;
  height: 18px;
  border-radius: 999px;
  opacity: 1;
}

/* Páginas hijas de sección */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.social-card {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.48);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.social-card:hover,
.social-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.07);
}

.social-card strong {
  font-size: 1.18rem;
}

.social-card span {
  color: var(--muted);
  font-size: 0.9rem;
}

.social-card.is-pending {
  opacity: 0.66;
  cursor: default;
}

@media (max-width: 860px) {
  .section-layout {
    display: block;
  }

  .section-subnav {
    top: var(--site-header-height, 78px);
    z-index: 70;
    margin-bottom: 18px;
  }

  .section-subnav-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 0 0 14px 14px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .section-subnav-heading {
    flex: 0 0 auto;
    padding-right: 10px;
    border-right: 1px solid var(--line);
  }

  .section-subnav-title {
    margin-bottom: 0;
    white-space: nowrap;
  }

  .section-subnav-links {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
  }

  .section-subnav-links a {
    white-space: nowrap;
    padding: 8px 11px;
  }

  .section-subnav-links a::before {
    display: none;
  }

  .section-subnav-links a.is-active {
    box-shadow: inset 0 -2px currentColor;
  }
}

@media (max-width: 620px) {
  .section-subnav-kicker {
    display: none;
  }

  .section-subnav-title {
    font-size: 0.78rem;
  }

  .social-grid {
    grid-template-columns: 1fr;
  }
}

/* Tema lateral — Ocio y Naturaleza */
.section-subnav-inner {
  background: rgba(239, 240, 229, 0.88);
}
.section-subnav-links a:hover,
.section-subnav-links a:focus-visible {
  background: rgba(169,147,96,0.12);
}
.section-subnav-links a.is-active {
  color: #725F3E;
  background: linear-gradient(90deg, rgba(210,199,154,0.20), rgba(184,194,160,0.16));
}
.social-card:hover,
.social-card:focus-visible {
  border-color: rgba(117,100,67,0.30);
}


/* v_3 — iconos de redes sociales */
.subnav-platforms {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

.subnav-platforms img {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
}

.social-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-brand-icon {
  width: 34px;
  height: 34px;
  display: block;
  flex: 0 0 auto;
}

.social-card strong {
  display: block;
}

@media (max-width: 620px) {
  .subnav-platforms img {
    width: 13px;
    height: 13px;
  }

  .social-brand-icon {
    width: 30px;
    height: 30px;
  }
}


/* v_3 — accesos rápidos del box de contacto en portada */
.card-quick-links {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}

.card-quick-link {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.56);
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.card-quick-link:hover,
.card-quick-link:focus-visible {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.card-quick-link img {
  width: 16px;
  height: 16px;
  display: block;
}

.card-quick-link--mail {
  color: currentColor;
}

.card-quick-link--mail img {
  filter: none;
}

/* Contacto: evitar repetir el título principal dentro del contenido */
.contact-simple {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.contact-simple .contact-icon {
  width: 82px;
  height: 82px;
}

.contact-simple .contact-icon svg {
  width: 60px;
  height: 60px;
}

.contact-simple-copy p {
  margin-top: 0;
}

@media (max-width: 620px) {
  .contact-simple {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* v_3 — alineación final del bloque de acciones en Contacto (portada) */
.card-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.card-action-row > .card-main-link {
  flex: 0 0 auto;
  margin: 0;
}

.card-action-row .card-quick-links {
  margin-top: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.card-quick-link {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}

.card-quick-link img {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  flex: 0 0 16px;
}

@media (max-width: 560px) {
  .card-action-row {
    gap: 12px;
  }

  .card-quick-links {
    gap: 6px;
  }

  .card-quick-link {
    width: 29px;
    height: 29px;
    min-width: 29px;
    min-height: 29px;
  }
}


/* =========================================================
   HATARJA v_3 — favoritos, recomendar y mapa del sitio
   ========================================================= */
.nav-bookmark {
  width: 30px;
  height: 30px;
  margin-left: 2px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.34);
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 160ms ease, background 160ms ease;
}

.nav-bookmark:hover,
.nav-bookmark:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.72);
}

.nav-bookmark img {
  width: 15px;
  height: 15px;
  display: block;
}

.main-nav {
  position: relative;
}

.bookmark-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(290px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.97);
  color: #202020;
  box-shadow: 0 16px 38px rgba(0,0,0,0.13);
  z-index: 1200;
}

.bookmark-popover strong,
.bookmark-popover span {
  display: block;
}

.bookmark-popover span {
  margin-top: 5px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.bookmark-popover kbd {
  padding: 1px 5px;
  border: 1px solid #c8c8c8;
  border-radius: 5px;
  background: #f5f5f5;
  font: inherit;
  font-weight: 780;
}

.bookmark-copy {
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 730;
  cursor: pointer;
}

/* Botón discreto para recomendar la página actual */
.page-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 760px);
}

.page-hero-title-row h1 {
  margin-right: auto;
}

.page-recommend {
  width: 31px;
  height: 31px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  color: inherit;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.page-recommend:hover,
.page-recommend:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.82);
}

.page-recommend img {
  width: 15px;
  height: 15px;
  display: block;
}

/* Mapa del sitio */
.footer-sitemap-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.footer-sitemap-link img {
  width: 14px;
  height: 14px;
  display: block;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sitemap-group {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.46);
}

.sitemap-group h2 {
  margin: 0 0 12px;
  font-size: 1.12rem;
}

.sitemap-group ul {
  margin: 0;
  padding-left: 1.1rem;
}

.sitemap-group li + li {
  margin-top: 7px;
}

.sitemap-group a {
  color: inherit;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .nav-bookmark {
    margin: 6px 0 0;
  }

  .bookmark-popover {
    position: fixed;
    top: calc(var(--site-header-height, 78px) + 10px);
    right: 16px;
  }
}

@media (max-width: 620px) {
  .sitemap-grid {
    grid-template-columns: 1fr;
  }

  .page-hero-title-row {
    gap: 8px;
  }

  .page-recommend {
    width: 29px;
    height: 29px;
  }
}


/* v_3 — ajuste de separación de favoritos y selector de recomendación */
.nav-bookmark {
  margin-left: 11px;
}

.page-hero-title-row {
  position: relative;
}

.share-choice-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.98);
  color: #202020;
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  z-index: 100;
}

.share-choice-popover strong {
  display: block;
  margin-bottom: 9px;
  font-size: 0.84rem;
}

.share-choice-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.share-choice-button {
  min-height: 42px;
  padding: 7px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  background: #fff;
  color: #202020;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 720;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}

.share-choice-button:hover,
.share-choice-button:focus-visible {
  transform: translateY(-1px);
  background: #f7f7f7;
}

.share-choice-button img {
  width: 17px;
  height: 17px;
  display: block;
  object-fit: contain;
}

@media (max-width: 860px) {
  .nav-bookmark {
    margin-left: 0;
    margin-top: 8px;
  }
}

@media (max-width: 620px) {
  .share-choice-popover {
    right: 0;
    width: min(210px, calc(100vw - 32px));
  }
}


/* v_4 — simplificación del submenú lateral */
.section-subnav-heading {
  padding-right: 0;
}

.section-subnav-title {
  display: none !important;
}

/* v_4 — mapa del sitio solo mediante icono */
.footer-sitemap-link {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  text-decoration: none;
  flex: 0 0 auto;
  transition: background 160ms ease, transform 160ms ease;
}

.footer-sitemap-link:hover,
.footer-sitemap-link:focus-visible {
  background: rgba(255,255,255,0.13);
  transform: translateY(-1px);
}

.footer-sitemap-link img {
  width: 15px;
  height: 15px;
  display: block;
  margin: 0;
}

@media (max-width: 860px) {
  .section-subnav-heading {
    padding-right: 8px;
  }
}


/* v_4 — centrado fino de enlaces del pie */
.footer-links {
  align-items: center;
  font-size: 0.72rem;
  line-height: 1;
}

.footer-links a {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* =========================================================
   HATARJA v_4 — área privada cifrada
   ========================================================= */
.private-shell {
  max-width: 920px;
}

.private-lock-card {
  max-width: 520px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,0.54);
  box-shadow: 0 16px 38px rgba(0,0,0,0.05);
}

.private-lock-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.58);
}

.private-lock-mark img {
  width: 25px;
  height: 25px;
  display: block;
}

.private-login-grid {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.private-field {
  display: grid;
  gap: 6px;
}

.private-field label {
  font-size: 0.82rem;
  font-weight: 780;
}

.private-field input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,0.88);
  color: inherit;
  font: inherit;
}

.private-field-error,
.private-access-error {
  min-height: 1.1em;
  margin: 0;
  font-size: 0.76rem;
}

.private-field-error {
  color: #9A2F2F;
}

.private-access-error {
  color: var(--muted);
}

.private-login-button,
.private-logout {
  min-height: 42px;
  padding: 9px 15px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.private-login-button {
  justify-self: start;
}

.private-unlocked {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.private-unlocked[hidden],
.private-locked[hidden] {
  display: none !important;
}

.private-nav-panel {
  position: sticky;
  top: calc(var(--site-header-height, 78px) + 16px);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.53);
}

.private-nav {
  display: grid;
  gap: 5px;
}

.private-nav-button {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 680;
  cursor: pointer;
}

.private-nav-button:hover,
.private-nav-button:focus-visible,
.private-nav-button.is-active {
  background: rgba(255,255,255,0.74);
}

.private-logout {
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.54);
}

.private-content {
  min-height: 300px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.48);
}

.private-page h2 {
  margin-top: 0;
}

.private-page h3 {
  margin-top: 26px;
  margin-bottom: 8px;
}

.private-security-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .private-unlocked {
    grid-template-columns: 1fr;
  }

  .private-nav-panel {
    position: static;
  }

  .private-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  .private-nav-button {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .private-logout {
    width: auto;
  }
}


/* v_4 — botón mostrar/ocultar contraseña */
.private-password-wrap {
  position: relative;
}

.private-password-wrap input {
  padding-right: 48px;
}

.private-password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.private-password-toggle:hover,
.private-password-toggle:focus-visible {
  background: rgba(0,0,0,0.055);
}

.private-password-toggle img {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}


/* v_4 — cabecera operativa y cierre reforzado del área privada */
.private-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(100%, 760px);
}

.private-hero-row h1 {
  margin: 0;
}

.private-hero-logout {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(120, 0, 0, 0.18);
  border-radius: 7px;
  background: #d92d20;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(120, 0, 0, 0.12);
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.private-hero-logout:hover,
.private-hero-logout:focus-visible {
  background: #b42318;
  transform: translateY(-1px);
  box-shadow: 0 4px 11px rgba(120, 0, 0, 0.18);
}

.private-hero-logout[hidden] {
  display: none !important;
}

.private-nav-panel .private-logout {
  display: none !important;
}

@media (max-width: 560px) {
  .private-hero-row {
    gap: 10px;
  }

  .private-hero-logout {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}


/* v_4 — acceso privado más compacto */
.private-lock-card {
  max-width: 560px;
  padding: 16px 18px;
  border-radius: 14px;
}

.private-lock-mark {
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 11px;
}

.private-lock-mark img {
  width: 19px;
  height: 19px;
}

.private-login-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.private-field {
  gap: 4px;
}

.private-field label {
  font-size: 0.76rem;
}

.private-field input {
  min-height: 38px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.private-login-button {
  min-height: 38px;
  padding: 7px 13px;
  border-radius: 8px;
  white-space: nowrap;
}

.private-field-error,
.private-access-error {
  min-height: 0;
  margin: 2px 0 0;
  font-size: 0.7rem;
}

.private-access-error {
  grid-column: 1 / -1;
}

.private-lock-card > p:not(.private-access-error),
.private-lock-card > .eyebrow,
.private-lock-card > h2 {
  display: none !important;
}

@media (max-width: 700px) {
  .private-login-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .private-login-button {
    justify-self: start;
  }

  .private-access-error {
    grid-column: auto;
  }
}


/* v_4 — formulario privado compacto en vertical con controles de visibilidad */
.private-login-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  align-items: stretch;
  margin-top: 10px;
}

.private-field {
  gap: 4px;
}

.private-field label {
  font-size: 0.76rem;
}

.private-input-wrap {
  position: relative;
}

.private-input-wrap input {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 7px 46px 7px 10px;
}

.private-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.private-visibility-toggle:hover,
.private-visibility-toggle:focus-visible {
  background: rgba(0,0,0,0.055);
}

.private-visibility-toggle img {
  width: 17px;
  height: 17px;
  display: block;
  pointer-events: none;
}

.private-login-button {
  justify-self: start;
  min-height: 37px;
  padding: 7px 13px;
  border-radius: 8px;
}

.private-access-error {
  grid-column: auto;
}

@media (max-width: 700px) {
  .private-login-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   HATARJA v_4 — generador local de contraseñas
   ========================================================= */
.password-tool {
  max-width: 780px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.48);
}

.password-tool-grid {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px 16px;
  align-items: end;
}

.password-tool-field {
  display: grid;
  gap: 7px;
}

.password-tool-field label,
.password-options legend {
  font-size: 0.82rem;
  font-weight: 780;
}

.password-length-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.password-length-row input[type="range"] {
  width: 100%;
}

.password-length-row input[type="number"] {
  width: 78px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.88);
  color: inherit;
  font: inherit;
  text-align: center;
}

.password-options {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.password-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
  margin-top: 10px;
}

.password-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.password-output-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.password-output-row input {
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.94);
  color: inherit;
  font: 700 0.95rem/1.2 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.03em;
}

.password-tool-button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 780;
  cursor: pointer;
}

.password-tool-button:hover,
.password-tool-button:focus-visible {
  background: rgba(255,255,255,0.95);
}

.password-tool-button.primary {
  border-color: transparent;
}

.password-strength-wrap {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.password-strength-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--muted);
}

.password-strength-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,0.09);
}

.password-strength-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width 180ms ease;
}

.password-generator-status {
  grid-column: 1 / -1;
  min-height: 1.25em;
  margin: 0;
  font-size: 0.77rem;
  color: var(--muted);
}

.password-local-note {
  margin: 16px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 620px) {
  .password-tool {
    padding: 16px;
  }

  .password-tool-grid {
    grid-template-columns: 1fr;
  }

  .password-options,
  .password-output-row,
  .password-strength-wrap,
  .password-generator-status {
    grid-column: auto;
  }

  .password-options-grid {
    grid-template-columns: 1fr;
  }

  .password-output-row {
    grid-template-columns: 1fr 1fr;
  }

  .password-output-row input {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   HATARJA v_4 — calculadora científica autónoma
   ========================================================= */
.scientific-calculator {
  width: min(100%, 650px);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.50);
  box-shadow: 0 14px 34px rgba(0,0,0,0.05);
  outline: none;
}

.calc-screen {
  margin-bottom: 13px;
  padding: 12px 13px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
}

.calc-screen-top {
  min-height: 1.3em;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.74rem;
}

.calc-memory-indicator {
  flex: 0 0 auto;
  font-weight: 800;
}

.calc-expression {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.calc-display {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 clamp(1.65rem, 5vw, 2.45rem)/1.15 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  text-align: right;
  outline: none;
}

.calc-memory-row,
.calc-keypad {
  display: grid;
  gap: 7px;
}

.calc-memory-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 7px;
}

.calc-keypad {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.calc-button {
  min-width: 0;
  min-height: 43px;
  padding: 7px 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.68);
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 720;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.calc-button:hover,
.calc-button:focus-visible {
  background: rgba(255,255,255,0.96);
  transform: translateY(-1px);
}

.calc-button:active {
  transform: translateY(0);
}

.calc-button.operator {
  font-weight: 850;
}

.calc-button.function {
  font-size: 0.79rem;
}

.calc-button.equals {
  font-weight: 900;
}

.calc-button.angle {
  letter-spacing: 0.03em;
}

.calc-note {
  width: min(100%, 650px);
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .scientific-calculator {
    padding: 12px;
    border-radius: 14px;
  }

  .calc-keypad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .calc-memory-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .calc-button {
    min-height: 41px;
    font-size: 0.82rem;
  }

  .calc-button.function {
    font-size: 0.75rem;
  }
}

@media (max-width: 390px) {
  .calc-memory-row {
    gap: 5px;
  }

  .calc-keypad {
    gap: 5px;
  }

  .calc-button {
    min-height: 39px;
    padding: 6px 3px;
    font-size: 0.78rem;
  }

  .calc-button.function {
    font-size: 0.71rem;
  }
}


/* v_4 — cabeceras interiores un tercio más compactas */
.page-hero {
  padding: 13px 0 10px;
}
.page-hero-inner { max-width: 720px; }
.page-hero .eyebrow {
  margin-bottom: 4px;
  font-size: 0.70rem;
  line-height: 1.1;
}
.page-hero h1 {
  max-width: 21ch;
  margin-bottom: 5px;
  font-size: clamp(1.38rem, 2.55vw, 1.98rem);
  line-height: 1;
}
.page-lead {
  max-width: 61ch;
  font-size: clamp(0.82rem, 1.20vw, 0.91rem);
  line-height: 1.34;
}
.page-content { padding-top: 30px; }
@media (min-width: 980px) {
  .page-hero { padding: 16px 0 13px; }
}

/* v_4 — calculadora con paréntesis y un único igual */
.calc-button.span-2 { grid-column: span 2; }
.calc-button.paren { font-size: 1rem; font-weight: 850; }


/* =========================================================
   HATARJA v_4 — compactación de herramientas
   ========================================================= */

.scientific-calculator {
  width: min(100%, 560px);
  padding: 11px;
  border-radius: 14px;
}

.calc-screen {
  margin-bottom: 8px;
  padding: 8px 10px 7px;
  border-radius: 9px;
}

.calc-screen-top {
  min-height: 1.1em;
  margin-bottom: 1px;
  font-size: 0.68rem;
}

.calc-display {
  font-size: clamp(1.35rem, 4vw, 1.95rem);
}

.calc-memory-row,
.calc-keypad {
  gap: 5px;
}

.calc-memory-row {
  margin-bottom: 5px;
}

.calc-button {
  min-height: 34px;
  padding: 5px 3px;
  border-radius: 7px;
  font-size: 0.77rem;
}

.calc-button.function {
  font-size: 0.70rem;
}

.calc-button.paren {
  font-size: 0.88rem;
}

.calc-note {
  width: min(100%, 560px);
  margin-top: 8px;
  font-size: 0.72rem;
}

.password-tool {
  max-width: 650px;
  padding: 14px;
  border-radius: 14px;
}

.password-tool-grid {
  gap: 9px 12px;
}

.password-tool-field {
  gap: 5px;
}

.password-length-row {
  gap: 8px;
}

.password-length-row input[type="number"] {
  width: 68px;
  min-height: 34px;
  padding: 5px 7px;
}

.password-options {
  padding: 10px;
  border-radius: 10px;
}

.password-options-grid {
  gap: 6px 12px;
  margin-top: 7px;
}

.password-check {
  gap: 6px;
  font-size: 0.79rem;
}

.password-output-row {
  gap: 6px;
  margin-top: 1px;
}

.password-output-row input {
  min-height: 37px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 0.84rem;
}

.password-tool-button {
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 0.74rem;
}

.password-strength-wrap {
  gap: 4px;
}

.password-local-note {
  margin-top: 10px;
  font-size: 0.72rem;
}

/* =========================================================
   HATARJA v_4 — conversor de unidades
   ========================================================= */
.unit-converter {
  width: min(100%, 650px);
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.50);
  box-shadow: 0 12px 28px rgba(0,0,0,0.045);
}

.unit-category-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 11px;
}

.unit-category-row label,
.unit-panel label {
  font-size: 0.76rem;
  font-weight: 780;
}

.unit-category-row select,
.unit-panel select,
.unit-panel input {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
}

.unit-conversion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.unit-panel {
  display: grid;
  gap: 5px;
}

.unit-panel label:not(:first-child) {
  margin-top: 3px;
}

.unit-panel input {
  font: 700 0.92rem/1.2 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.unit-swap-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.72);
  color: inherit;
  font: 800 1rem/1 sans-serif;
  cursor: pointer;
}

.unit-swap-button:hover,
.unit-swap-button:focus-visible {
  background: rgba(255,255,255,0.98);
}

.unit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}

.unit-action-button {
  min-height: 33px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.74);
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 780;
  cursor: pointer;
  white-space: nowrap;
}

.unit-converter-status {
  min-height: 1em;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.unit-converter-note {
  width: min(100%, 650px);
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .scientific-calculator,
  .password-tool,
  .unit-converter {
    width: 100%;
    max-width: none;
  }

  .calc-button {
    min-height: 32px;
    font-size: 0.73rem;
  }

  .calc-button.function {
    font-size: 0.67rem;
  }

  .password-tool {
    padding: 11px;
  }

  .password-options-grid {
    grid-template-columns: 1fr;
  }

  .unit-converter {
    padding: 11px;
  }

  .unit-category-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .unit-conversion-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .unit-swap-button {
    justify-self: center;
    transform: rotate(90deg);
  }

  .unit-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 390px) {
  .calc-keypad,
  .calc-memory-row {
    gap: 4px;
  }

  .calc-button {
    min-height: 30px;
    padding: 4px 2px;
    font-size: 0.70rem;
  }

  .calc-button.function {
    font-size: 0.64rem;
  }

  .password-output-row {
    grid-template-columns: 1fr;
  }

  .password-output-row input {
    grid-column: auto;
  }

  .password-tool-button {
    width: 100%;
  }
}


/* =========================================================
   HATARJA v_4 — Generador QR local y personalizable
   ========================================================= */
.qr-tool {
  width: min(100%, 900px);
}

.qr-type-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.qr-type-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: rgba(255,255,255,0.44);
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 780;
  cursor: pointer;
}

.qr-type-tab.is-active {
  background: rgba(255,255,255,0.95);
  border-bottom-color: rgba(255,255,255,0.95);
}

.qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 15px;
  align-items: start;
}

.qr-controls {
  display: grid;
  gap: 9px;
}

.qr-card,
.qr-preview-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,0.49);
}

.qr-card {
  padding: 13px;
}

.qr-panel label,
.qr-vcard-grid label,
.qr-custom-grid label,
.qr-logo-file,
.qr-logo-size-row label {
  font-size: 0.75rem;
  font-weight: 760;
}

.qr-panel > label {
  display: grid;
  gap: 5px;
}

.qr-panel input,
.qr-panel textarea,
.qr-vcard-grid input,
.qr-vcard-grid textarea,
.qr-custom-grid select,
.qr-logo-file input {
  width: 100%;
  box-sizing: border-box;
  min-height: 35px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.92);
  color: inherit;
  font: inherit;
  font-size: 0.80rem;
}

.qr-panel textarea,
.qr-vcard-grid textarea {
  resize: vertical;
}

.qr-vcard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.qr-vcard-grid label {
  display: grid;
  gap: 4px;
}

.qr-vcard-grid .span-2 {
  grid-column: 1 / -1;
}

.qr-custom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.qr-custom-grid label {
  display: grid;
  gap: 4px;
}

.qr-custom-grid input[type="color"] {
  width: 100%;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.92);
  cursor: pointer;
}

.qr-logo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
}

.qr-logo-file {
  display: grid;
  gap: 4px;
}

.qr-logo-size-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.qr-logo-size-row span {
  font-size: 0.74rem;
  color: var(--muted);
  text-align: right;
}

.qr-small-button,
.qr-downloads button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.76);
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 780;
  cursor: pointer;
}

.qr-small-button:hover,
.qr-downloads button:hover:not(:disabled) {
  background: rgba(255,255,255,0.98);
}

.qr-ecc-note,
.qr-private-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.4;
}

.qr-generate-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qr-generate-button {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.qr-status {
  min-height: 1em;
  margin: 0;
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.35;
}

.qr-status[data-tone="error"] {
  color: #9f241b;
}

.qr-status[data-tone="warning"] {
  color: #8a5d08;
}

.qr-preview-card {
  position: sticky;
  top: calc(var(--site-header-height, 78px) + 14px);
  padding: 12px;
}

.qr-preview-stage {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

#qr-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-preview-empty {
  padding: 20px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.qr-downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.qr-downloads button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Calculadora: colores funcionales */
.scientific-calculator .calc-button {
  background: #f3f3f1;
  border-color: #d5d5d0;
}

.scientific-calculator .calc-button.function,
.scientific-calculator .calc-memory-row .calc-button {
  background: #ddddda;
  border-color: #c8c8c3;
}

.scientific-calculator .calc-button.operator {
  background: #efaa54;
  border-color: #dc923a;
  color: #302010;
}

.scientific-calculator .calc-button.equals {
  background: #63a86e;
  border-color: #4d9258;
  color: #ffffff;
}

.scientific-calculator [data-action="clear"],
.scientific-calculator [data-action="clear-entry"] {
  background: #e58a82;
  border-color: #cf7067;
  color: #4d1612;
}

.scientific-calculator [data-action="backspace"] {
  background: #ead2a5;
  border-color: #d8bd89;
}

.scientific-calculator .calc-button:hover,
.scientific-calculator .calc-button:focus-visible {
  filter: brightness(1.035);
}

@media (max-width: 800px) {
  .qr-layout {
    grid-template-columns: 1fr;
  }

  .qr-preview-card {
    position: static;
    width: min(100%, 360px);
    box-sizing: border-box;
  }

  .qr-custom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .qr-card {
    padding: 10px;
  }

  .qr-vcard-grid,
  .qr-custom-grid {
    grid-template-columns: 1fr;
  }

  .qr-vcard-grid .span-2 {
    grid-column: auto;
  }

  .qr-logo-row {
    grid-template-columns: 1fr;
  }

  .qr-logo-size-row {
    grid-template-columns: 90px minmax(0, 1fr) 38px;
  }

  .qr-generate-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .qr-generate-button {
    width: 100%;
  }

  .qr-preview-card {
    width: 100%;
  }
}


/* v_4 — ajuste fino QR: menos margen y logo central más aprovechado */
.qr-preview-card {
  padding: 9px;
}

.qr-preview-stage {
  padding: 3px;
}

#qr-canvas {
  width: 100%;
  height: 100%;
}

.qr-ecc-note {
  margin-top: 6px;
}


/* =========================================================
   HATARJA v_4 — Comunicaciones / Morse / Radiofrecuencia
   ========================================================= */
.communications-shell {
  max-width: 900px;
}

.communications-local-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.communications-local-nav a {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.55);
  color: inherit;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 780;
}

.communications-section + .communications-section {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.communications-section h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.communications-intro {
  max-width: 66ch;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.48;
}

.communications-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.48);
}

.communications-card + .communications-card {
  margin-top: 11px;
}

.communications-card.compact {
  min-height: 120px;
}

.communications-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.communications-card p {
  margin-top: 0;
  font-size: 0.82rem;
  line-height: 1.48;
}

.communications-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.comm-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.58);
  font-size: 0.67rem;
  font-weight: 790;
}

.communications-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 11px;
}

.frequency-table-wrap {
  overflow-x: auto;
}

.frequency-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.frequency-table th,
.frequency-table td {
  padding: 5px 7px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.frequency-table th:nth-child(odd),
.frequency-table td:nth-child(odd) {
  width: 16%;
  text-align: center;
}

.frequency-table th {
  background: rgba(255,255,255,0.56);
  font-weight: 800;
}

.communications-footnote {
  margin: 9px 0 0 !important;
  color: var(--muted);
  font-size: 0.72rem !important;
}

.meshtastic-card {
  margin-top: 11px;
}

.meshtastic-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.meshtastic-options > div {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.46);
}

.meshtastic-options strong,
.meshtastic-options span {
  display: block;
}

.meshtastic-options strong {
  margin-bottom: 4px;
  font-size: 0.77rem;
}

.meshtastic-options span {
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.42;
}

.meshtastic-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.meshtastic-actions .button {
  min-height: 33px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.73rem;
}

.comm-secondary-link {
  font-size: 0.73rem;
  font-weight: 740;
}

.meshtastic-security-note {
  margin: 11px 0 0 !important;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.71rem !important;
}

/* Morse */
.morse-tool {
  width: min(100%, 760px);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.48);
}

.morse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.morse-panel {
  display: grid;
  gap: 6px;
}

.morse-panel label {
  font-size: 0.76rem;
  font-weight: 780;
}

.morse-panel textarea {
  width: 100%;
  min-height: 116px;
  box-sizing: border-box;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  resize: vertical;
}

.morse-panel textarea.morse-output {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.04em;
}

.morse-main-button,
.morse-controls button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.72);
  color: inherit;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 780;
  cursor: pointer;
}

.morse-main-button {
  justify-self: start;
}

.morse-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.morse-controls button:disabled {
  opacity: 0.45;
}

.morse-speed {
  display: inline-grid;
  grid-template-columns: auto 95px auto;
  gap: 6px;
  align-items: center;
  margin-left: 4px;
  font-size: 0.71rem;
  font-weight: 720;
}

.morse-status {
  min-height: 1.1em;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.71rem;
}

.morse-reference {
  margin-top: 9px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.morse-reference summary {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 770;
}

.morse-reference-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 13px;
  margin-top: 10px;
}

.morse-reference table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.morse-reference th,
.morse-reference td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
}

.morse-reference td:last-child {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.morse-reference-note {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.morse-reference-note p {
  margin: 3px 0 9px;
}

/* Resource subnav icon alignment */
.section-subnav-links a .subnav-platforms {
  min-width: 16px;
  justify-content: center;
}

@media (max-width: 760px) {
  .communications-grid-2,
  .meshtastic-options,
  .morse-grid {
    grid-template-columns: 1fr;
  }

  .morse-reference-grid {
    grid-template-columns: 1fr;
  }

  .morse-reference table {
    max-width: 280px;
  }
}

@media (max-width: 520px) {
  .communications-card {
    padding: 11px;
  }

  .communications-local-nav {
    overflow-x: auto;
  }

  .morse-tool {
    padding: 10px;
  }

  .morse-speed {
    width: 100%;
    grid-template-columns: auto minmax(90px, 1fr) auto;
    margin-left: 0;
    margin-top: 3px;
  }
}


/* v_4 — QR más recto y preview más aprovechado */
.qr-preview-card {
  padding: 6px;
}

.qr-preview-stage {
  padding: 0;
  border-radius: 0;
}

/* v_4 — C y CE claramente diferenciados */
.scientific-calculator [data-action="clear"] {
  background: #cf4f46;
  border-color: #b53e36;
  color: #ffffff;
}

.scientific-calculator [data-action="clear-entry"] {
  background: #f0a45d;
  border-color: #d88d48;
  color: #3e2411;
}

/* v_4 — escucha Morse por micrófono */
.morse-listener {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.morse-listener summary {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 780;
}

.beta-label {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 760;
  vertical-align: 1px;
}

.morse-listener-body {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.40);
}

.morse-listener-body > p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.42;
}

.morse-listener-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.morse-listener-settings label {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  gap: 7px;
  align-items: center;
  font-size: 0.70rem;
  font-weight: 720;
}

.morse-listener-settings span {
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.morse-listener-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.morse-listener-actions button {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.72);
  color: inherit;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 780;
  cursor: pointer;
}

.morse-listener-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.morse-listener-note {
  margin: 8px 0 0 !important;
  font-size: 0.67rem !important;
}

@media (max-width: 620px) {
  .morse-listener-settings {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   HATARJA v_4 — MiniMeshtastic beta
   ========================================================= */
.mini-meshtastic {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,0.40);
}

.mini-mesh-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mini-mesh-head h4 {
  margin: 0;
  font-size: 0.93rem;
}

.mini-mesh-light {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 760;
}

.mini-mesh-intro {
  margin: 7px 0 10px !important;
  color: var(--muted);
  font-size: 0.72rem !important;
}

.mini-mesh-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.mini-mesh-support > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.48);
  font-size: 0.68rem;
}

.mini-mesh-support strong {
  font-weight: 780;
}

.mini-mesh-support span {
  color: var(--muted);
}

.mini-mesh-support span[data-ok="true"] {
  color: #387845;
}

.mini-mesh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.mini-mesh-actions button {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.72);
  color: inherit;
  font: inherit;
  font-size: 0.70rem;
  font-weight: 770;
  cursor: pointer;
}

.mini-mesh-actions button:disabled {
  opacity: 0.44;
  cursor: default;
}

.mini-mesh-device-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  margin-top: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.035);
  font-size: 0.68rem;
}

.mini-mesh-device-row span {
  color: var(--muted);
}

.mini-mesh-device-row strong {
  overflow-wrap: anywhere;
}

.mini-mesh-status {
  min-height: 1.1em;
  margin: 7px 0 0 !important;
  color: var(--muted);
  font-size: 0.68rem !important;
}

.mini-mesh-status[data-tone="ok"] {
  color: #387845;
}

.mini-mesh-status[data-tone="error"] {
  color: #a33028;
}

.mini-mesh-note {
  margin: 7px 0 0 !important;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.64rem !important;
}

@media (max-width: 520px) {
  .mini-mesh-support {
    grid-template-columns: 1fr;
  }

  .mini-mesh-actions button {
    flex: 1 1 auto;
  }
}


/* v_4 — ajuste C/CE y marco cuadrado del logo QR */
.scientific-calculator [data-action="clear"] {
  background: #e56a5f;
  border-color: #c9544b;
  color: #111111;
}

.scientific-calculator [data-action="clear-entry"] {
  background: #f1b862;
  border-color: #d79a43;
  color: #111111;
}


/* v_4 — Morse como recurso independiente */
.morse-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.morse-panel-actions button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.72);
  color: inherit;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 780;
  cursor: pointer;
}

.morse-panel-actions .morse-main-button {
  background: rgba(255,255,255,0.88);
}

.morse-standalone {
  margin-top: 0;
}


/* v_4 — corrección visible C/CE */
.scientific-calculator .calc-button.function[data-action="clear"] {
  background: #e76f63 !important;
  border-color: #c65349 !important;
  color: #111111 !important;
}

.scientific-calculator .calc-button.function[data-action="clear-entry"] {
  background: #f2b85f !important;
  border-color: #d99a3f !important;
  color: #111111 !important;
}

/* v_4 — resultado explícito de escucha Morse */
.morse-listen-result {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.58);
}

.morse-listen-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.morse-listen-result-head strong {
  font-size: 0.74rem;
}

.morse-listen-result-head span {
  color: var(--muted);
  font-size: 0.64rem;
}

.morse-listen-result label {
  display: grid;
  gap: 4px;
  font-size: 0.69rem;
  font-weight: 760;
}

.morse-listen-result textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 58px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.92);
  color: inherit;
  font: inherit;
  font-size: 0.76rem;
  resize: vertical;
}

#morse-listen-result-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.04em;
}

.morse-listen-copy {
  justify-self: start;
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.78);
  color: inherit;
  font: inherit;
  font-size: 0.70rem;
  font-weight: 780;
  cursor: pointer;
}

/* v_4 — MiniMeshtastic como módulo claramente independiente */
.mini-meshtastic.prominent {
  margin-top: 14px;
  padding: 14px;
  border-width: 2px;
  background: rgba(255,255,255,0.62);
}

.mini-meshtastic.prominent .mini-mesh-head h4 {
  font-size: 1.02rem;
}

.mini-meshtastic.prominent::before {
  content: "LoRa · conexión local";
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .morse-listen-result-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .morse-listen-copy {
    width: 100%;
  }
}


/* =========================================================
   HATARJA v_4 — MiniMeshtastic Chat
   ========================================================= */
.mini-mesh-chat {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.mini-mesh-chat-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

.mini-mesh-chat-toolbar label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 760;
}

.mini-mesh-chat-toolbar select {
  width: 100%;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.88);
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
}

.mini-mesh-log {
  position: relative;
  min-height: 150px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.52);
}

.mini-mesh-messages {
  max-height: 270px;
  overflow-y: auto;
  padding: 8px;
}

.mini-mesh-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0 !important;
  padding: 16px;
  color: var(--muted);
  font-size: 0.70rem !important;
  text-align: center;
  pointer-events: none;
}

.mini-mesh-message {
  max-width: 82%;
  margin-bottom: 7px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.78);
}

.mini-mesh-message.is-out {
  margin-left: auto;
  background: rgba(239,170,84,0.16);
}

.mini-mesh-message-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 0.62rem;
}

.mini-mesh-message-head strong {
  overflow-wrap: anywhere;
}

.mini-mesh-message-head span {
  flex: 0 0 auto;
  color: var(--muted);
}

.mini-mesh-message p {
  margin: 0 !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.75rem !important;
  line-height: 1.38 !important;
}

.mini-mesh-compose {
  margin-top: 8px;
}

.mini-mesh-compose textarea {
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.90);
  color: inherit;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.4;
  resize: vertical;
}

.mini-mesh-compose-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}

.mini-mesh-compose-foot span {
  color: var(--muted);
  font-size: 0.64rem;
}

.mini-mesh-compose-foot span[data-over="true"] {
  color: #a33028;
  font-weight: 800;
}

.mini-mesh-compose-foot button,
.mini-mesh-history-controls button {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.76);
  color: inherit;
  font: inherit;
  font-size: 0.69rem;
  font-weight: 780;
  cursor: pointer;
}

.mini-mesh-compose-foot button {
  background: rgba(99,168,110,0.18);
}

.mini-mesh-compose-foot button:disabled {
  opacity: 0.45;
  cursor: default;
}

.mini-mesh-history-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.mini-mesh-history-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  color: var(--muted);
  font-size: 0.66rem;
}

.mini-mesh-history-controls input {
  margin: 0;
}

.mini-meshtastic[data-ready="true"] .mini-mesh-device-row {
  background: rgba(99,168,110,0.10);
}

@media (max-width: 600px) {
  .mini-mesh-chat-toolbar {
    grid-template-columns: 1fr;
  }

  .mini-mesh-message {
    max-width: 92%;
  }

  .mini-mesh-history-controls {
    align-items: stretch;
  }

  .mini-mesh-history-controls label {
    width: 100%;
  }

  .mini-mesh-history-controls button {
    flex: 1 1 auto;
  }
}


/* =========================================================
   HATARJA v_4 — Conversor APA 7
   ========================================================= */
.apa-tool {
  width: min(100%, 850px);
  display: grid;
  gap: 12px;
}

.apa-search-card,
.apa-editor-card,
.apa-output-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.48);
}

.apa-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.apa-card-heading h2,
.apa-output-card h2 {
  margin: 0 0 7px;
  font-size: 1.15rem;
}

.apa-online-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 780;
}

.apa-help,
.apa-disclaimer {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.apa-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.apa-search-row input,
.apa-form-grid input,
.apa-form-grid select,
.apa-form-grid textarea,
.apa-copy-field input {
  width: 100%;
  min-height: 35px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.92);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
}

.apa-form-grid textarea {
  resize: vertical;
}

.apa-search-row button,
.apa-editor-actions button,
.apa-search-result button,
.apa-output-heading button,
.apa-copy-field button {
  min-height: 33px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.76);
  color: inherit;
  font: inherit;
  font-size: 0.70rem;
  font-weight: 780;
  cursor: pointer;
}

.apa-search-row button,
.apa-editor-actions .apa-primary {
  background: rgba(99,168,110,0.16);
}

.apa-status {
  min-height: 1.1em;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.69rem;
}

.apa-status[data-tone="ok"] {
  color: #397847;
}

.apa-status[data-tone="warning"] {
  color: #8a5d08;
}

.apa-search-results {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.apa-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.54);
}

.apa-search-result strong {
  font-size: 0.73rem;
}

.apa-search-result span {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.64rem;
}

.apa-search-result button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.apa-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.apa-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.apa-form-grid label {
  display: grid;
  gap: 4px;
  color: inherit;
  font-size: 0.70rem;
  font-weight: 750;
}

.apa-form-grid .span-2 {
  grid-column: 1 / -1;
}

.apa-editor-actions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.apa-output-block {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.58);
}

.apa-output-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}

.apa-output-heading strong {
  font-size: 0.73rem;
}

.apa-reference-output {
  min-height: 48px;
  font-size: 0.82rem;
  line-height: 1.55;
}

.apa-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.apa-output-grid > label {
  display: grid;
  gap: 4px;
  font-size: 0.69rem;
  font-weight: 750;
}

.apa-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
}

.apa-disclaimer {
  margin: 9px 0 0;
}

@media (max-width: 620px) {
  .apa-search-row,
  .apa-form-grid,
  .apa-output-grid {
    grid-template-columns: 1fr;
  }

  .apa-form-grid .span-2 {
    grid-column: auto;
  }

  .apa-search-result {
    grid-template-columns: 1fr;
  }

  .apa-search-result button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .apa-search-row button {
    width: 100%;
  }
}




/* v_4 — descarga RIS */
.apa-output-heading {
  flex-wrap: wrap;
}

.apa-output-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.apa-output-heading .apa-ris-button {
  background: rgba(99,168,110,0.13);
}

@media (max-width: 540px) {
  .apa-output-actions {
    width: 100%;
  }

  .apa-output-actions button {
    flex: 1 1 auto;
  }
}


/* =========================================================
   HATARJA v_4 — borde eléctrico de navegación
   ========================================================= */
:root {
  --menu-electric: #45D96D;
}

/* Elimina el subrayado previo */
.main-nav a:not(.nav-cta)::after,
.section-subnav-links a::after {
  display: none !important;
  content: none !important;
}

/* Reserva el borde para evitar saltos al hacer hover */
.main-nav a:not(.nav-cta) {
  border: 1px solid transparent;
  border-radius: 8px;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.main-nav a:not(.nav-cta):hover,
.main-nav a:not(.nav-cta):focus-visible {
  border-color: var(--menu-electric);
  background: rgba(69,217,109, 0.055);
  box-shadow:
    0 0 0 1px rgba(69,217,109, 0.10),
    0 0 9px rgba(69,217,109, 0.18);
}

.main-nav a:not(.nav-cta).is-active {
  border-color: rgba(69,217,109, 0.78);
  background: rgba(69,217,109, 0.045);
  box-shadow: 0 0 7px rgba(69,217,109, 0.13);
}

.section-subnav-links a {
  border: 1px solid transparent;
  border-radius: 7px;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.section-subnav-links a:hover,
.section-subnav-links a:focus-visible {
  border-color: var(--menu-electric);
  background: rgba(69,217,109, 0.055);
  box-shadow: 0 0 7px rgba(69,217,109, 0.16);
}

.section-subnav-links a.is-active {
  border-color: rgba(69,217,109, 0.84);
  background: rgba(69,217,109, 0.055);
  box-shadow: 0 0 6px rgba(69,217,109, 0.13);
}


/* v_4 — diagnóstico visible MiniMeshtastic */
.mini-mesh-diagnostics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.mini-mesh-diagnostics > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.46);
}

.mini-mesh-diagnostics span,
.mini-mesh-diagnostics strong {
  display: block;
}

.mini-mesh-diagnostics span {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.60rem;
}

.mini-mesh-diagnostics strong {
  overflow-wrap: anywhere;
  font-size: 0.67rem;
}

.mini-mesh-diagnostics strong[data-state="ok"] {
  color: #397847;
}

.mini-mesh-diagnostics strong[data-state="warning"] {
  color: #8a5d08;
}

.mini-mesh-diagnostics strong[data-state="error"] {
  color: #a33028;
}

@media (max-width: 680px) {
  .mini-mesh-diagnostics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   HATARJA v_4 — portada visual de Recursos
   ========================================================= */
.resources-hub {
  width: min(100%, 930px);
}

.resources-hub-intro {
  max-width: 68ch;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.resources-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.resource-hub-card {
  min-height: 178px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.56);
  box-shadow: 0 6px 18px rgba(0,0,0,0.035);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.resource-hub-card:hover {
  transform: translateY(-2px);
  border-color: var(--menu-electric);
  box-shadow:
    0 8px 22px rgba(0,0,0,0.055),
    0 0 8px color-mix(in srgb, var(--menu-electric) 16%, transparent);
}

.resource-hub-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.resource-hub-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.70);
}

.resource-hub-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.resource-hub-number {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
}

.resource-hub-card h2 {
  margin: 12px 0 5px;
  font-size: 1rem;
}

.resource-hub-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.45;
}

.resource-hub-card .resource-hub-main-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 11px;
  color: inherit;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 820;
}

.resource-hub-main-link span {
  color: var(--menu-electric);
}

.resource-hub-card--communications {
  background: rgba(255,255,255,0.42);
}

.resource-communications-links {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
}

.resource-communications-link {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 31px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.62);
  color: inherit;
  text-decoration: none;
  font-size: 0.69rem;
  font-weight: 760;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.resource-communications-link:hover,
.resource-communications-link:focus-visible {
  border-color: var(--menu-electric);
  box-shadow: 0 0 6px color-mix(in srgb, var(--menu-electric) 16%, transparent);
  transform: translateX(2px);
}

.resource-communications-link img {
  width: 17px;
  height: 17px;
  justify-self: center;
}

.resource-communications-link .arrow {
  color: var(--menu-electric);
}

@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .resource-hub-card:hover,
  .resource-communications-link:hover,
  .resource-communications-link:focus-visible {
    box-shadow: 0 7px 20px rgba(0,0,0,0.06);
  }
}

@media (max-width: 1000px) {
  .resources-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .resources-card-grid {
    grid-template-columns: 1fr;
  }

  .resource-hub-card {
    min-height: 0;
  }
}


/* =========================================================
   HATARJA v_4 — variación visual portada Recursos
   Ocio y Naturaleza: tan / negro / borde tan
   ========================================================= */
.resources-hub .resource-hub-card--featured {
  background: linear-gradient(145deg, #DFD7AF 0%, #CFC49B 100%);
  border-color: #C7BC90;
  color: #2D2A21;
  box-shadow: 0 8px 20px rgba(133, 120, 76, 0.13);
}

.resources-hub .resource-hub-card--featured > p,
.resources-hub .resource-hub-card--featured .resource-hub-number {
  color: rgba(45, 42, 33, 0.70);
}

.resources-hub .resource-hub-card--featured .resource-hub-icon {
  border-color: rgba(45, 42, 33, 0.20);
  background: rgba(255,255,255,0.55);
}

.resources-hub .resource-hub-card--featured .resource-hub-main-link span {
  color: #4E4938;
}

.resources-hub .resource-hub-card--dark {
  background: linear-gradient(145deg, #171717 0%, #292929 100%);
  border-color: #101010;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}

.resources-hub .resource-hub-card--dark > p,
.resources-hub .resource-hub-card--dark .resource-hub-number {
  color: rgba(255,255,255,0.70);
}

.resources-hub .resource-hub-card--dark .resource-hub-icon {
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.92);
}

.resources-hub .resource-hub-card--dark .resource-hub-main-link {
  color: #FFFFFF;
}

.resources-hub .resource-hub-card--dark .resource-hub-main-link span {
  color: #DFD7AF;
}

.resources-hub .resource-hub-card--outline {
  background: rgba(255,255,255,0.50);
  border: 2px solid #CFC49B;
  box-shadow:
    0 7px 18px rgba(0,0,0,0.035),
    0 0 0 1px rgba(207,196,155,0.08),
    0 0 10px rgba(207,196,155,0.13);
}

.resources-hub .resource-hub-card--outline:hover {
  border-color: #DFD7AF;
  box-shadow:
    0 9px 22px rgba(0,0,0,0.05),
    0 0 12px rgba(207,196,155,0.18);
}



/* =========================================================
   HATARJA v_4 — portada Ocio y Naturaleza corregida
   Vademécum tan / Área privada negra / Contacto borde tan
   ========================================================= */

#home-card-grid > #vademecum {
  background: linear-gradient(180deg, #E3DCAF 0%, #DAD0A1 100%);
  border-color: rgba(34,37,33,0.10);
  color: #2D2A21;
}

#home-card-grid > #area-privada {
  background: var(--ink);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

#home-card-grid > #area-privada .card-number,
#home-card-grid > #area-privada .card-kicker,
#home-card-grid > #area-privada p {
  color: rgba(255,255,255,0.68);
}

#home-card-grid > #area-privada a {
  color: var(--tan);
}

#home-card-grid > #contacto {
  background: transparent;
  border: 2px solid #CFC49B;
  box-shadow:
    0 7px 18px rgba(0,0,0,0.035),
    0 0 0 1px rgba(207,196,155,0.07),
    0 0 10px rgba(207,196,155,0.11);
}

#home-card-grid > #contacto:hover {
  border-color: #DFD7AF;
  box-shadow:
    0 9px 22px rgba(0,0,0,0.05),
    0 0 12px rgba(207,196,155,0.18);
}


/* =========================================================
   HATARJA v_5 — catálogo estático, navegación profunda simple
   ========================================================= */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.66rem;
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  text-decoration: underline;
}

.catalog-intro {
  max-width: 72ch;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.62;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.catalog-grid.catalog-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalog-card {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.56);
  box-shadow: 0 6px 18px rgba(0,0,0,0.035);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.catalog-card:hover {
  transform: translateY(-2px);
  border-color: var(--menu-electric);
  box-shadow: 0 8px 22px rgba(0,0,0,0.055);
}

.catalog-card h2,
.catalog-card h3 {
  margin: 0 0 6px;
  line-height: 1.2;
}

.catalog-card h2 { font-size: 1.08rem; }
.catalog-card h3 { font-size: 0.94rem; }

.catalog-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.52;
}

.catalog-card .catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 820;
  text-decoration: none;
}

.catalog-card .catalog-link span {
  color: var(--menu-electric);
}

.catalog-card--soft {
  background: rgba(223,215,175,0.22);
}

.catalog-card--dark {
  background: linear-gradient(145deg, #181818 0%, #292929 100%);
  border-color: #151515;
  color: #fff;
}

.catalog-card--dark p,
.catalog-card--dark .catalog-meta,
.catalog-card--dark .catalog-kicker {
  color: rgba(255,255,255,0.69);
}

.catalog-kicker {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.60rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.catalog-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.58);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 720;
  line-height: 1.2;
}

.catalog-card--dark .catalog-chip {
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.09);
  color: #fff;
}

.catalog-section {
  margin-top: 22px;
}

.catalog-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.catalog-section-head h2 {
  margin: 0;
  font-size: 1.08rem;
}

.catalog-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.70rem;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 13px;
}

.filter-button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.60);
  color: var(--ink);
  font: inherit;
  font-size: 0.67rem;
  font-weight: 760;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.filter-button:hover,
.filter-button:focus-visible,
.filter-button.is-active {
  border-color: var(--menu-electric);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 7px color-mix(in srgb, var(--menu-electric) 14%, transparent);
}

.filter-button.is-active {
  color: var(--ink);
}

.filter-summary {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 0.66rem;
}

.filter-empty {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.74rem;
}

.route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.route-badge {
  min-width: 72px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.63);
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 800;
  text-align: center;
}

.taxonomy-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.taxonomy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.static-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--menu-electric);
  background: rgba(255,255,255,0.43);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.download-pattern {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.48);
}

.download-pattern strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.72rem;
}

.download-pattern span {
  color: var(--muted);
  font-size: 0.64rem;
}

.download-pattern .format-pill {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.60rem;
  font-weight: 850;
}

@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .filter-button:hover,
  .filter-button:focus-visible,
  .filter-button.is-active {
    box-shadow: 0 0 7px rgba(0,0,0,0.08);
  }
}

@media (max-width: 900px) {
  .catalog-grid.catalog-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .catalog-grid,
  .catalog-grid.catalog-grid--3,
  .taxonomy-split {
    grid-template-columns: 1fr;
  }

  .route-card {
    grid-template-columns: 1fr;
  }

  .route-badge {
    justify-self: start;
  }

  .catalog-section-head {
    display: block;
  }

  .catalog-section-head p {
    margin-top: 4px;
  }
}


/* =========================================================
   HATARJA v_5 — filtros desplegables de catálogo
   ========================================================= */
.catalog-filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 0 0 11px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,0.42);
}

.catalog-filter-control {
  display: grid;
  gap: 4px;
  min-width: min(250px, 100%);
}

.catalog-filter-control label {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.catalog-filter-control select {
  min-height: 36px;
  padding: 6px 34px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 670;
  cursor: pointer;
  outline: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.catalog-filter-control select:hover,
.catalog-filter-control select:focus-visible {
  border-color: var(--menu-electric);
  background: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--menu-electric) 10%, transparent);
}

.catalog-filter-note {
  flex: 1 1 220px;
  margin: 0;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.45;
}

.catalog-source-note {
  margin-top: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.35);
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.48;
}

.catalog-source-note strong {
  color: var(--ink);
}

.catalog-source-note a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .catalog-filter-control select:hover,
  .catalog-filter-control select:focus-visible {
    box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
  }
}

@media (max-width: 620px) {
  .catalog-filter-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .catalog-filter-control {
    min-width: 0;
  }

  .catalog-filter-note {
    margin-top: 2px;
  }
}




/* =========================================================
   HATARJA v_5 — iconos en tarjetas internas de Vademécum
   ========================================================= */
.catalog-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.catalog-card-heading .catalog-kicker {
  margin: 0;
}

.catalog-card-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.70);
}

.catalog-card-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.catalog-card--dark .catalog-card-icon {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.92);
}


/* =========================================================
   HATARJA v_5 — Recursos compactos con icono a la derecha
   ========================================================= */
.resources-card-grid .resource-hub-card {
  min-height: 148px;
  padding: 13px 14px;
}

.resources-card-grid .resource-hub-card-head {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.resources-card-grid .resource-hub-card-head h2 {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.2;
}

.resources-card-grid .resource-hub-icon {
  order: 2;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.resources-card-grid .resource-hub-icon img {
  width: 17px;
  height: 17px;
}

.resources-card-grid .resource-hub-number {
  display: none !important;
}

.resources-card-grid .resource-hub-card > p {
  font-size: 0.71rem;
  line-height: 1.42;
}

.resources-card-grid .resource-hub-main-link {
  padding-top: 8px;
}

.resources-card-grid .resource-communications-links {
  padding-top: 8px;
  gap: 4px;
}

.resources-card-grid .resource-communications-link {
  min-height: 29px;
  padding: 4px 7px;
}


/* =========================================================
   HATARJA v_5 — Traductor
   ========================================================= */
.translator-tool {
  width: min(100%, 980px);
}

.translator-toolbar,
.translator-actions,
.translator-box-actions,
.radio-search-grid,
.radio-search-actions,
.radio-station-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.translator-status-row,
.radio-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 0;
}

.translator-status,
.radio-status,
.translator-detected,
.translator-service,
.radio-result-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.translator-status[data-tone="ok"],
.radio-status[data-tone="ok"] {
  color: #397847;
}

.translator-status[data-tone="warning"],
.radio-status[data-tone="warning"] {
  color: #8a5d08;
}

.translator-status[data-tone="error"],
.radio-status[data-tone="error"] {
  color: #a33028;
}

.translator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.translator-box {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,0.48);
}

.translator-box-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.translator-box select,
.radio-search-grid select,
.radio-search-grid input {
  width: 100%;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.94);
  color: inherit;
  font: inherit;
  font-size: 0.76rem;
}

.translator-box select {
  max-width: 260px;
  font-weight: 700;
}

.translator-box textarea {
  width: 100%;
  min-height: 220px;
  box-sizing: border-box;
  resize: vertical;
  padding: 11px;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,0.78);
  color: inherit;
  font: inherit;
  font-size: 0.93rem;
  line-height: 1.55;
  outline: none;
}

.translator-box textarea:focus {
  box-shadow: inset 0 0 0 1px var(--menu-electric);
}

.translator-box textarea[readonly] {
  background: rgba(255,255,255,0.55);
}

.translator-swap {
  align-self: center;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,0.86);
  color: inherit;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.translator-box-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: 7px;
}

.translator-counter {
  color: var(--muted);
  font-size: 0.64rem;
}

.translator-tool button,
.radio-tool button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.82);
  color: inherit;
  font: inherit;
  font-size: 0.70rem;
  font-weight: 780;
  cursor: pointer;
}

.translator-tool button:disabled,
.radio-tool button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.translator-primary,
.radio-primary {
  background: color-mix(in srgb, var(--menu-electric) 12%, rgba(255,255,255,0.88)) !important;
  border-color: color-mix(in srgb, var(--menu-electric) 44%, var(--line)) !important;
}

.translator-actions {
  margin-top: 10px;
}

.translator-note,
.radio-note {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.48;
}

.translator-note a,
.radio-note a {
  color: inherit;
  text-underline-offset: 2px;
}

/* =========================================================
   HATARJA v_5 — Radio online
   ========================================================= */
.radio-tool {
  width: min(100%, 980px);
}

.radio-search-panel,
.radio-player,
.radio-results-panel {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,0.48);
}

.radio-search-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  align-items: end;
}

.radio-field {
  display: grid;
  gap: 4px;
  color: inherit;
  font-size: 0.68rem;
  font-weight: 750;
}

.radio-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  color: var(--muted);
  font-size: 0.68rem;
}

.radio-search-actions {
  margin-top: 9px;
  align-items: center;
}

.radio-player {
  margin-top: 10px;
}

.radio-player[hidden] {
  display: none;
}

.radio-player-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.radio-player h2,
.radio-results-panel h2 {
  margin: 0;
  font-size: 1rem;
}

.radio-player-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.radio-player audio {
  width: 100%;
  margin-top: 10px;
}

.radio-player-link {
  font-size: 0.68rem;
  font-weight: 760;
  color: inherit;
}

.radio-results-panel {
  margin-top: 10px;
}

.radio-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.radio-results {
  display: grid;
  gap: 7px;
}

.radio-station-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.56);
}

.radio-station-card h3 {
  margin: 0;
  font-size: 0.82rem;
}

.radio-station-meta,
.radio-station-tags {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.38;
}

.radio-station-tags {
  opacity: 0.88;
}

.radio-favourite {
  width: 35px;
  min-width: 35px;
  padding-inline: 0 !important;
  font-size: 1rem !important;
}

.radio-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

@supports not (color: color-mix(in srgb, red 10%, white)) {
  .translator-primary,
  .radio-primary {
    background: rgba(99,168,110,0.14) !important;
  }
}

@media (max-width: 760px) {
  .translator-grid {
    grid-template-columns: 1fr;
  }

  .translator-swap {
    justify-self: center;
    transform: rotate(90deg);
  }

  .radio-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .translator-box textarea {
    min-height: 170px;
  }

  .radio-search-grid {
    grid-template-columns: 1fr;
  }

  .radio-station-card {
    grid-template-columns: 1fr;
  }

  .radio-station-actions {
    justify-content: flex-start;
  }
}


/* =========================================================
   HATARJA v_5 — compactación visual adicional
   Cabecera, cabeceras interiores y pie reducidos ~25 %
   ========================================================= */
:root {
  --site-header-height: 57px;
}

/* Cabecera flotante superior */
.nav-wrap {
  min-height: 57px;
  gap: 13px;
}

.brand {
  gap: 9px;
}

.brand-symbol {
  width: 40px;
  height: 34px;
}

.brand-symbol img {
  width: 44px;
}

.brand-copy strong {
  font-size: 0.88rem;
  letter-spacing: 0.16em;
}

.brand-copy small {
  margin-top: 4px;
  font-size: 0.60rem;
  letter-spacing: 0.09em;
}

.menu-toggle {
  width: 36px;
  height: 36px;
  gap: 4px;
  border-radius: 10px;
}

.menu-toggle span {
  width: 17px;
}

@media (min-width: 980px) {
  .main-nav a {
    padding: 7px 9px;
    font-size: 0.82rem;
  }

  .main-nav .nav-cta {
    margin-left: 4px;
    padding: 7px 10px;
  }
}

/* Cabeceras interiores */
.page-hero {
  padding: 10px 0 8px;
}

.page-hero-inner {
  max-width: 680px;
}

.page-hero .eyebrow {
  margin-bottom: 3px;
  font-size: 0.64rem;
}

.page-hero h1 {
  max-width: 23ch;
  margin-bottom: 4px;
  font-size: clamp(1.05rem, 1.95vw, 1.50rem);
  line-height: 1.02;
}

.page-lead {
  max-width: 66ch;
  font-size: clamp(0.76rem, 1.05vw, 0.84rem);
  line-height: 1.30;
}

@media (min-width: 980px) {
  .page-hero {
    padding: 12px 0 10px;
  }
}

/* Franja negra inferior */
.site-footer {
  padding: 8px 0;
}

.footer-grid {
  gap: 6px;
}

.footer-brand strong {
  font-size: 0.86rem;
  line-height: 1;
}

.footer-brand span {
  font-size: 0.60rem;
  line-height: 1;
}

.footer-links {
  gap: 14px;
  font-size: 0.78rem;
  line-height: 1;
}


/* =========================================================
   HATARJA v_5 — compactación de secciones provisionales
   ========================================================= */
.content-placeholder.content-placeholder--compact-third {
  width: min(100%, 350px);
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 14px;
}

.content-placeholder.content-placeholder--compact-third h2 {
  margin-bottom: 7px;
  font-size: clamp(1.12rem, 2vw, 1.45rem);
}

.content-placeholder.content-placeholder--compact-third p {
  margin-top: 0;
  font-size: 0.78rem;
  line-height: 1.42;
}

.content-placeholder.content-placeholder--compact-third .button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.72rem;
}

/* Área privada bloqueada: aproximadamente la mitad del volumen anterior */
.private-locked {
  width: min(100%, 340px);
}

.private-lock-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 12px 13px;
  border-radius: 12px;
}

.private-lock-mark {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 9px;
}

.private-lock-mark img {
  width: 16px;
  height: 16px;
}

.private-login-grid {
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 6px;
}

.private-field {
  gap: 3px;
}

.private-field label {
  font-size: 0.70rem;
}

.private-field input {
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 0.78rem;
}

.private-login-button {
  min-height: 34px;
  justify-self: start;
  padding: 6px 11px;
  font-size: 0.72rem;
}

.private-access-error {
  grid-column: auto;
}

/* Recursos: textos largos del submenú ligeramente más pequeños */
body[data-section="recursos"] .section-subnav-links a {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 0.75rem;
  line-height: 1.16;
}

body[data-section="recursos"] .section-subnav-links a .subnav-platforms img {
  width: 14px;
  height: 14px;
}

@media (max-width: 700px) {
  .private-locked {
    width: min(100%, 340px);
  }
}

@media (max-width: 620px) {
  .content-placeholder.content-placeholder--compact-third,
  .private-locked {
    width: 100%;
  }

  body[data-section="recursos"] .section-subnav-links a {
    font-size: 0.72rem;
  }
}


/* =========================================================
   HATARJA v_5 — altura mínima global y footer al fondo
   ========================================================= */
html {
  min-height: 100%;
}

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

#site-header {
  flex: 0 0 auto;
  width: 100%;
}

main {
  flex: 1 0 auto;
  width: 100%;
}

#site-footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
}



/* =========================================================
   HATARJA v_5 — submenú lateral más próximo al borde
   ========================================================= */
@media (min-width: 861px) {
  .page-content > .container.section-layout {
    width: min(calc(100% - 14px), calc(var(--container) + 144px));
  }

  .section-layout {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 11px;
  }
}


/* =========================================================
   HATARJA v_5 — Flora: reinos, iconos y lectura fluida
   ========================================================= */
.catalog-intro.catalog-intro--fluid {
  width: 100%;
  max-width: none;
}

.flora-filter-divider {
  color: var(--muted);
}

.catalog-card--kingdom-fungi {
  grid-column: 1 / -1;
  margin-top: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.60), rgba(223,215,175,0.12));
  border-color: color-mix(in srgb, var(--menu-electric) 34%, var(--line));
}

.catalog-card--kingdom-fungi::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--line) 8%,
    var(--menu-electric) 50%,
    var(--line) 92%,
    transparent 100%
  );
}

.flora-category-intro {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,0.46);
  color: var(--muted);
  font-size: 0.80rem;
  line-height: 1.58;
}

.flora-category-intro strong {
  color: var(--ink);
}

.flora-category-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
}

@supports not (color: color-mix(in srgb, red 10%, white)) {
  .catalog-card--kingdom-fungi {
    border-color: var(--line);
  }
}

@media (max-width: 640px) {
  .catalog-card--kingdom-fungi {
    grid-column: 1;
    margin-top: 12px;
  }
}


/* =========================================================
   HATARJA v_5 — Área privada horizontal y más compacta
   ========================================================= */
.private-locked {
  width: min(100%, 690px);
}

.private-lock-card {
  position: relative;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  padding: 9px 11px 8px 12px;
  border-radius: 11px;
}

.private-lock-mark {
  grid-column: 2;
  grid-row: 1;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 9px;
  justify-self: end;
}

.private-lock-mark img {
  width: 18px;
  height: 18px;
}

.private-login-grid {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin: 0;
}

.private-field {
  gap: 2px;
}

.private-field label {
  font-size: 0.67rem;
}

.private-field input,
.private-input-wrap input {
  min-height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.75rem;
}

.private-input-wrap input {
  padding-right: 39px;
}

.private-visibility-toggle {
  right: 4px;
  width: 27px;
  height: 27px;
}

.private-visibility-toggle img {
  width: 15px;
  height: 15px;
}

.private-login-button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.69rem;
  align-self: end;
}

.private-field-error,
.private-access-error {
  min-height: 0;
  margin: 1px 0 0;
  font-size: 0.64rem;
}

.private-access-error {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .private-locked {
    width: 100%;
  }

  .private-lock-card {
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: start;
  }

  .private-login-grid {
    grid-template-columns: 1fr;
  }

  .private-lock-mark {
    align-self: start;
  }

  .private-login-button {
    justify-self: start;
  }
}


/* =========================================================
   HATARJA v_5 — ajuste del título al marco central
   ========================================================= */
@media (min-width: 861px) {
  body[data-section] .page-hero > .container.page-hero-inner {
    width: min(calc(100% - 14px), calc(var(--container) + 144px));
    max-width: none;
    box-sizing: border-box;
    padding-left: 179px;
    padding-right: 0;
  }
}

/* =========================================================
   HATARJA v_5 — área privada en dos niveles con botón a la derecha
   ========================================================= */
.private-locked {
  width: min(100%, 560px);
}

.private-lock-card {
  position: relative;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
}

.private-lock-mark {
  grid-column: 2;
  grid-row: 1;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 9px;
  justify-self: end;
  align-self: start;
}

.private-login-grid {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "user action"
    "password action"
    "error error";
  gap: 8px 10px;
  align-items: end;
  margin: 0;
}

.private-login-grid .private-field:nth-of-type(1) { grid-area: user; }
.private-login-grid .private-field:nth-of-type(2) { grid-area: password; }
.private-login-button {
  grid-area: action;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.69rem;
  align-self: end;
}
.private-access-error { grid-area: error; margin: 1px 0 0; }

@media (max-width: 700px) {
  .private-locked { width: 100%; }
  .private-lock-card {
    grid-template-columns: minmax(0, 1fr) 36px;
  }
  .private-login-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "user"
      "password"
      "action"
      "error";
  }
  .private-login-button { justify-self: start; }
}

/* =========================================================
   HATARJA v_5 — miniaturas en fichas de Flora
   ========================================================= */
.catalog-thumb {
  margin: 11px 0 0;
  width: 100%;
}
.catalog-thumb img {
  display: block;
  width: 100%;
  height: 86px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
}
.catalog-card .catalog-meta {
  margin-top: 9px;
}
.catalog-card--kingdom-fungi .catalog-thumb {
  max-width: 360px;
}


/* =========================================================
   HATARJA v_5 — ajuste final de alineación de cabecera y miniaturas de Flora
   ========================================================= */
@media (min-width: 861px) {
  #site-header .container.nav-wrap {
    width: min(calc(100% - 14px), calc(var(--container) + 144px));
  }
}

.catalog-thumb img {
  height: 68px;
  object-position: center center;
}

@media (max-width: 700px) {
  .catalog-thumb img {
    height: 62px;
  }
}


/* =========================================================
   HATARJA v_5 — alineación exacta de cabeceras y menú flotante
   ========================================================= */
@media (min-width: 861px) {
  body[data-section] .page-hero > .container.page-hero-inner {
    width: min(calc(100% - 14px), calc(var(--container) + 144px));
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: 168px 11px minmax(0, 1fr);
    box-sizing: border-box;
  }

  body[data-section] .page-hero > .container.page-hero-inner > * {
    grid-column: 3;
  }
}

@media (min-width: 980px) {
  #site-header .container.nav-wrap {
    width: min(calc(100% - 14px), calc(var(--container) + 144px));
  }

  #site-header .main-nav {
    margin-right: 18px;
  }
}


/* =========================================================
   HATARJA v_5 — Flora: miniaturas fotográficas y páginas de grupo
   ========================================================= */
.catalog-thumb {
  margin: 9px 0 0;
}
.catalog-thumb img {
  width: 100%;
  height: 66px;
  object-fit: cover;
  object-position: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.72);
}

.flora-group-overview {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,0.52);
}

.flora-group-figure {
  margin: 0;
  min-width: 0;
}
.flora-group-figure img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid var(--line);
}
.flora-group-figure figcaption {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.62rem;
}

.flora-group-copy {
  align-self: center;
}
.flora-group-copy h2 {
  margin: 3px 0 8px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.flora-group-copy p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.52;
}
.flora-group-copy p:last-child { margin-bottom: 0; }
.flora-group-taxonomy {
  color: var(--forest-dark) !important;
  font-size: 0.66rem !important;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.flora-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
  margin-top: 11px;
}
.flora-fact-card {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,0.40);
}
.flora-fact-card h3 {
  margin: 0 0 4px;
  font-size: 0.78rem;
}
.flora-fact-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.45;
}

.flora-species-catalog {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,0.48);
}
.flora-species-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.flora-species-heading .eyebrow { margin-bottom: 2px; }
.flora-species-heading h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.flora-species-heading p:not(.eyebrow) {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.70rem;
  line-height: 1.45;
}
.flora-species-count {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 760;
}
.flora-species-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) 190px;
  gap: 8px;
  margin-top: 10px;
}
.flora-species-toolbar[hidden] { display: none; }
.flora-species-toolbar label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 760;
}
.flora-species-toolbar input,
.flora-species-toolbar select {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.9);
  color: inherit;
  font: inherit;
}
.flora-species-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 10px;
}
.flora-species-empty {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.68rem;
}
.flora-species-empty strong,
.flora-species-empty span { display: block; }
.flora-species-empty strong { color: var(--ink); margin-bottom: 2px; }
.flora-identification-note {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.46;
}

@media (max-width: 800px) {
  .flora-group-overview { grid-template-columns: 1fr; }
  .flora-group-figure img { height: 180px; }
  .flora-facts { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .catalog-thumb img { height: 58px; }
  .flora-group-figure img { height: 155px; }
  .flora-species-heading { display: grid; }
  .flora-species-count { justify-self: start; }
  .flora-species-toolbar,
  .flora-species-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   HATARJA v_5 — búsqueda de sección y código Hatarja de utilidad
   ========================================================= */
.catalog-filter-control--search {
  position: relative;
  flex: 1 1 260px;
  min-width: min(260px, 100%);
}
.section-search-input-wrap {
  position: relative;
}
.section-search-input-wrap img {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  opacity: .78;
  pointer-events: none;
}
.section-search-input-wrap input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px 6px 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font: inherit;
  font-size: .76rem;
}
.section-search-input-wrap input:focus {
  outline: 2px solid color-mix(in srgb, var(--forest) 28%, transparent);
  border-color: var(--forest);
}
.section-search-results {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.section-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.section-search-result:hover,
.section-search-result:focus-visible {
  background: rgba(78,93,77,.10);
}
.section-search-result span:first-child {
  display: grid;
}
.section-search-result strong {
  font-size: .74rem;
}
.section-search-result small {
  color: var(--muted);
  font-size: .62rem;
}
.section-search-arrow {
  color: var(--forest);
  font-weight: 850;
}
.section-search-empty {
  margin: 0;
  padding: 8px 9px;
  color: var(--muted);
  font-size: .68rem;
}

.flora-utility-panel {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.50);
}
.flora-utility-heading h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.flora-utility-heading > div > p:not(.eyebrow) {
  max-width: 88ch;
  margin: 0;
  color: var(--muted);
  font-size: .70rem;
  line-height: 1.45;
}
.flora-utility-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.flora-utility-item {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.62);
}
.flora-utility-item img {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
}
.flora-utility-item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.flora-utility-item strong {
  font-size: .69rem;
  line-height: 1.18;
}
.flora-utility-item span {
  color: var(--muted);
  font-size: .60rem;
  line-height: 1.30;
}
.flora-utility-safety,
.flora-scope-note {
  margin: 9px 0 0;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.42;
}
 .flora-utility-safety {
  border: 1px solid rgba(181,65,57,.28);
  border-left: 3px solid #B54139;
  background: rgba(181,65,57,.09);
  color: #2b2523;
}
.flora-scope-note {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.36);
}
.flora-identification-note--warning {
  border-left-color: #B54139;
  background: rgba(181,65,57,.06);
}

.flora-group-overview--fungi {
  border-color: color-mix(in srgb, #80633A 42%, var(--line));
}

@media (max-width: 980px) {
  .flora-utility-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 700px) {
  .catalog-filter-control--search {
    flex-basis: 100%;
  }
  .flora-utility-grid {
    grid-template-columns: 1fr;
  }
  .flora-utility-item span {
    font-size: .64rem;
  }
}


/* =========================================================
   HATARJA v_5 — utilidad combinada, aviso y búsqueda en Fauna
   ========================================================= */
.flora-utility-safety strong,
.flora-identification-note--warning strong {
  color: #9f271f;
  font-weight: 900;
}
.flora-utility-item--use img,
.flora-utility-item--toxic img {
  filter: none;
}
.flora-utility-item--use {
  border-color: rgba(198, 140, 30, .28);
}
.flora-utility-item--toxic {
  border-color: rgba(184, 58, 48, .30);
}
@media (max-width: 980px) and (min-width: 701px) {
  .flora-utility-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
.catalog-card:target {
  border-color: var(--menu-electric);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--menu-electric) 22%, transparent), 0 8px 22px rgba(0,0,0,.055);
}


/* =========================================================
   HATARJA v_5 — código Hatarja de riesgos en Fauna
   ========================================================= */
.fauna-utility-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flora-utility-item--biohazard {
  border-color: rgba(217, 144, 36, .34);
}
.flora-utility-item--biohazard img,
.flora-utility-item--toxic img {
  filter: none;
}
@media (max-width: 1180px) {
  .fauna-utility-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .fauna-utility-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   HATARJA v_6 — textos fluidos, cabecera flotante y fauna
   ========================================================= */
body[data-section] .content-shell p:not(.eyebrow),
body[data-section] .content-shell li,
body[data-section] .content-shell .catalog-source-note,
body[data-section] .content-shell .catalog-intro,
body[data-section] .content-shell .flora-utility-heading > div > p:not(.eyebrow),
body[data-section] .content-shell .flora-utility-safety,
body[data-section] .content-shell .flora-scope-note,
body[data-section] .content-shell .page-lead {
  max-width: none;
}

@media (min-width: 980px) {
  #site-header .main-nav {
    margin-right: 34px;
  }
}

.flora-utility-item--danger {
  border-color: rgba(184, 58, 48, .30);
}
.flora-utility-item--danger img,
.flora-utility-item--biohazard img {
  filter: none;
}

.fauna-group-overview {
  border-color: color-mix(in srgb, var(--menu-olive) 22%, var(--line));
}

@media (max-width: 1180px) {
  .fauna-utility-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .fauna-utility-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   HATARJA v_6 — textos fluidos y ancho responsive global
   ========================================================= */
.content-shell,
.content-shell > *,
.catalog-intro,
.catalog-intro.catalog-intro--fluid,
.page-lead,
.flora-group-copy,
.flora-group-copy p,
.flora-utility-heading,
.flora-utility-heading > div,
.flora-utility-heading > div > p:not(.eyebrow),
.flora-scope-note,
.flora-identification-note,
.catalog-source-note,
.download-pattern,
.download-pattern span,
.pro-detail-copy,
.pro-detail-copy p,
.pro-download-panel,
.pro-download-panel p,
.pro-download-note {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.content-shell p,
.content-shell li,
.catalog-card p,
.catalog-card h2,
.catalog-card h3 {
  overflow-wrap: anywhere;
}

/* Fauna comparte la estructura visual interior de Flora */
.fauna-group-overview { width: 100%; }

/* El Código Hatarja usa cinco categorías idénticas en Flora y Fauna */
.fauna-utility-grid,
.flora-utility-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flora-utility-item--biohazard { border-color: rgba(190,145,0,.38); }
.flora-utility-item--danger { border-color: rgba(217,45,32,.34); }
@media (max-width: 1100px) {
  .fauna-utility-grid,
  .flora-utility-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .fauna-utility-grid,
  .flora-utility-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   HATARJA v_6 — iconos compactos en tarjetas
   ========================================================= */
.catalog-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.catalog-card-heading .catalog-kicker {
  margin: 0;
}
.catalog-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.catalog-card-icon img {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
}
.route-card .catalog-card-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}
.route-card .catalog-card-icon img {
  width: 16px;
  height: 16px;
}


/* =========================================================
   HATARJA v_6 — senderismo por comunidades y claves de ficha
   ========================================================= */
.route-group-overview {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.route-group-figure {
  margin: 0;
}
.route-group-figure img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
}
.route-group-figure figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.68rem;
}
.route-group-copy p,
.route-group-copy li,
.route-group-copy h2,
.route-group-copy h3,
.route-facts p,
.route-facts h3,
.route-scope-note,
.route-identification-note,
.route-community-grid p,
.route-community-grid h2,
.route-community-grid h3 {
  max-width: none;
}
.route-group-taxonomy {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.route-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.route-fact-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.56);
}
.route-fact-card h3 {
  margin: 0 0 6px;
  font-size: 0.86rem;
}
.route-fact-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
}
.route-utility-panel .flora-utility-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.route-scope-note,
.route-identification-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.58;
}
.route-identification-note--warning {
  padding: 12px 14px;
  border: 1px solid rgba(217,45,32,.28);
  border-radius: 14px;
  background: rgba(217,45,32,.05);
  color: var(--ink);
}
.route-identification-note--warning strong { color: #c3261b; }
.route-community-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.route-community-grid .catalog-card { height: 100%; }
.route-download-note {
  margin-top: 14px;
}
@media (max-width: 860px) {
  .route-group-overview { grid-template-columns: 1fr; }
  .route-facts,
  .route-utility-panel .flora-utility-grid,
  .route-community-grid { grid-template-columns: 1fr; }
}


/* v7 responsive text refinement */
.content-shell p, .content-shell li, .page-lead, .catalog-intro--fluid, .route-group-copy p, .route-fact-card p, .flora-utility-item span, .flora-utility-safety { max-width:none; }


/* =========================================================
   HATARJA v_7 — alcance del catálogo de Senderismo como Flora/Fauna
   ========================================================= */
.route-scope-note {
  margin: 9px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.36);
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.42;
  width: 100%;
  box-sizing: border-box;
}


/* HATARJA v_7b — senderismo flags and route icons refinement */
[data-page="vademecum-senderismo"] .catalog-thumb img {
  object-fit: contain;
  object-position: center;
  padding: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,244,239,.92));
}
.route-group-figure img {
  object-fit: contain;
  object-position: center;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,244,239,.96));
}
.route-scope-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.5);
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.55;
  width: 100%;
  box-sizing: border-box;
}


/* Hatarja v7 senderismo main cards: community flags should span the full elongated box */
[data-page="vademecum-senderismo"] .catalog-card .catalog-thumb img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  background: none;
}
[data-page="vademecum-senderismo"] .catalog-card .catalog-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,244,239,.98));
  overflow: hidden;
}
/* Community detail pages keep the full flag visible */
[data-page^="vademecum-senderismo-"] .route-group-figure img {
  object-fit: contain;
  object-position: center;
  padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,244,239,.96));
}


/* V7 — Submenús: icono en columna propia y texto alineado a su derecha.
   Las líneas envueltas comienzan bajo el texto, nunca bajo el icono. */
.section-subnav-links a {
  display: flex;
  align-items: flex-start;
  column-gap: 7px;
}

.section-subnav-links a .subnav-platforms {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 16px;
  margin: 0;
  padding-top: 1px;
  justify-content: center;
}

.section-subnav-links a > span:last-child {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}


/* =========================================================
   HATARJA V7 — fecha y hora local en cabeceras interiores
   Ubicación estructural: columna izquierda, sin solapamientos
   ========================================================= */
.page-hero-inner {
  position: relative;
}

.page-hero-copy {
  min-width: 0;
}

.page-datetime {
  box-sizing: border-box;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.24;
}

.page-datetime-date,
.page-datetime-time {
  display: block;
  max-width: 100%;
}

.page-datetime-date {
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: 0.008em;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.page-datetime-time {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* Páginas con submenú: el reloj ocupa exactamente el carril de 168 px
   que queda bajo la marca y sobre el submenú. El título vive en la columna 3. */
@media (min-width: 861px) {
  body[data-section] .page-hero > .container.page-hero-inner {
    align-items: start;
  }

  body[data-section] .page-hero > .container.page-hero-inner > .page-datetime {
    position: static;
    grid-column: 1 !important;
    grid-row: 1;
    width: 100%;
    max-width: 160px;
    margin: 0;
    padding: 2px 8px 3px 7px;
    align-self: start;
    overflow: hidden;
  }

  body[data-section] .page-hero > .container.page-hero-inner > .page-hero-copy {
    grid-column: 3 !important;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  /* Las páginas interiores sin submenú conservan un bloque compacto normal,
     evitando posiciones absolutas o espacios artificiales. */
  body:not([data-section]) .page-datetime {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 9px;
    padding: 0 0 6px;
  }

  body:not([data-section]) .page-datetime-time {
    margin-top: 0;
  }
}

/* Móvil/tablet: vuelve al flujo normal, encima del título. */
@media (max-width: 860px) {
  .page-datetime {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px;
    padding: 0 0 7px;
  }

  .page-datetime-date {
    min-width: 0;
    font-size: 0.66rem;
  }

  .page-datetime-time {
    flex: 0 0 auto;
    margin-top: 0;
    font-size: 0.90rem;
    letter-spacing: 0.09em;
  }
}

@media (max-width: 430px) {
  .page-datetime {
    gap: 8px;
  }

  .page-datetime-date {
    font-size: 0.61rem;
    line-height: 1.28;
  }

  .page-datetime-time {
    font-size: 0.84rem;
    letter-spacing: 0.07em;
  }
}

.page-datetime {
  color: var(--muted);
  border-left: 2px solid var(--tan-deep);
}
.page-datetime-time { color: var(--forest-dark); }
@media (max-width: 860px) {
  .page-datetime {
    border-left: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 55%, transparent);
  }
}
@supports not (color: color-mix(in srgb, red 10%, white)) {
  @media (max-width: 860px) { .page-datetime { border-bottom-color: var(--line); } }
}


/* =========================================================
   HATARJA V7 — Fauna: Reino Animalia y jerarquía taxonómica
   ========================================================= */
.fauna-kingdom-banner {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin: 0 0 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(223,215,175,0.14));
}
.fauna-kingdom-banner h2 { margin: 0 0 4px; font-size: 1.24rem; }
.fauna-kingdom-banner p:not(.catalog-kicker) { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.56; }
.fauna-kingdom-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.65); }
.fauna-kingdom-icon img { width: 27px; height: 27px; }
.fauna-taxonomy-note { margin-top: 0; margin-bottom: 18px; }
.fauna-phylum-grid .catalog-card { padding: 13px; }
.fauna-phylum-grid .catalog-card h3 { font-size: 0.96rem; }
.fauna-phylum-grid .catalog-card p { font-size: 0.70rem; }
.fauna-phylum-grid .catalog-thumb img { height: 78px; }
.fauna-phylum-card .catalog-card-icon { width: 28px; height: 28px; }
.fauna-phylum-card .catalog-card-icon img { width: 22px; height: 22px; }
@media (max-width: 900px) { .fauna-phylum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) {
  .fauna-kingdom-banner { grid-template-columns: 40px minmax(0,1fr); padding: 12px; }
  .fauna-kingdom-icon { width: 38px; height: 38px; border-radius: 10px; }
  .fauna-kingdom-icon img { width: 23px; height: 23px; }
  .fauna-phylum-grid { grid-template-columns: 1fr !important; }
}


/* =========================================================
   HATARJA V7 — Recursos jerárquicos
   Familias + submenú expandible/contraíble
   ========================================================= */
@media (min-width: 861px) {
  body[data-section="recursos"] .section-layout {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 28px;
  }
}

body[data-section="recursos"] .section-subnav-inner--tree {
  padding: 14px 11px 12px;
}

.section-subnav-heading--tree {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.subnav-tree-all {
  border: 0;
  padding: 2px 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.61rem;
  font-weight: 760;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.section-subnav-links--tree {
  gap: 4px;
}

.section-subnav-links--tree > .subnav-tree-link {
  margin-bottom: 4px;
}

.subnav-tree-group {
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding-top: 5px;
  margin-top: 2px;
}

.subnav-tree-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27px;
  gap: 2px;
  align-items: stretch;
}

.section-subnav-links .subnav-tree-group-link,
.section-subnav-links .subnav-tree-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.section-subnav-links .subnav-tree-group-link {
  position: relative;
  padding: 7px 5px 7px 8px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 790;
  line-height: 1.15;
}

.section-subnav-links .subnav-tree-group-link::before,
.section-subnav-links .subnav-tree-link--level-1::before {
  display: none;
}

.subnav-tree-group-link .subnav-platforms,
.subnav-tree-link .subnav-platforms {
  flex: 0 0 auto;
}

.subnav-tree-group-link > span:last-child,
.subnav-tree-link > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.subnav-tree-toggle {
  display: grid;
  place-items: center;
  width: 27px;
  min-height: 29px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.subnav-tree-toggle span {
  display: block;
  font-size: 0.88rem;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform 150ms ease;
}

.subnav-tree-toggle[aria-expanded="true"] span {
  transform: rotate(0deg);
}

.subnav-tree-toggle:hover,
.subnav-tree-toggle:focus-visible {
  border-color: var(--line);
  background: rgba(255,255,255,0.48);
}

.section-subnav-children {
  display: grid;
  gap: 1px;
  margin: 2px 0 5px 12px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.section-subnav-children[hidden] {
  display: none !important;
}

.section-subnav-links .subnav-tree-link--level-1 {
  padding: 5px 5px 5px 6px;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.15;
}

.section-subnav-links .subnav-tree-link--level-1.is-active,
.section-subnav-links .subnav-tree-group-link.is-active {
  font-weight: 840;
}

body[data-section="recursos"] .section-subnav-links .subnav-tree-link--level-1:hover,
body[data-section="recursos"] .section-subnav-links .subnav-tree-link--level-1:focus-visible,
body[data-section="recursos"] .section-subnav-links .subnav-tree-group-link:hover,
body[data-section="recursos"] .section-subnav-links .subnav-tree-group-link:focus-visible {
  transform: none;
}

/* Recursos: cuatro familias de entrada */
.resource-family-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resource-family-card {
  min-height: 250px;
  border-top-width: 3px;
}

.resource-family-list {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.32;
}

.resource-family-list li {
  position: relative;
  padding-left: 12px;
}

.resource-family-list li::before {
  content: "·";
  position: absolute;
  left: 2px;
  font-weight: 900;
}

.resource-family-back {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 760;
}

.resource-family-back a {
  text-decoration: none;
}

.resource-family-back a:hover,
.resource-family-back a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.resource-family-tools-grid {
  align-items: stretch;
}

body[data-section="recursos"] .resource-family-card,
body[data-section="recursos"] .resource-family-page .resource-hub-card {
  background: rgba(255,255,255,0.50);
}

/* Tema Ocio y Naturaleza */
body[data-section="recursos"] .resource-family-card {
  border-top-color: #A99360;
}
body[data-section="recursos"] .subnav-tree-group.has-active > .subnav-tree-group-row .subnav-tree-group-link,
body[data-section="recursos"] .subnav-tree-group-link.is-active,
body[data-section="recursos"] .subnav-tree-link--level-1.is-active {
  color: #725F3E;
  background: linear-gradient(90deg, rgba(210,199,154,0.20), rgba(184,194,160,0.16));
}

@media (max-width: 860px) {
  body[data-section="recursos"] .section-subnav {
    position: relative;
    top: auto;
    z-index: 1;
  }
  body[data-section="recursos"] .section-subnav-inner--tree {
    display: block;
    overflow: visible;
    padding: 10px 12px 12px;
    border-radius: 12px;
  }
  body[data-section="recursos"] .section-subnav-heading--tree {
    display: flex;
    padding: 0 0 7px;
    margin-bottom: 4px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body[data-section="recursos"] .section-subnav-kicker {
    display: block;
  }
  body[data-section="recursos"] .section-subnav-links--tree {
    display: grid;
    width: 100%;
    gap: 3px;
  }
  body[data-section="recursos"] .section-subnav-links--tree a {
    white-space: normal;
  }
  .resource-family-grid {
    grid-template-columns: 1fr;
  }
  .resource-family-card {
    min-height: 0;
  }
}

@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .subnav-tree-group { border-top-color: var(--line); }
}


/* ===== Recursos V7 · QR lector, hashes y manipulador Morse ===== */
.qr-suite-tabs,
.hash-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.qr-suite-tab,
.hash-mode-tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: inherit;
  font: inherit;
  font-weight: 800;
  padding: 9px 15px;
  cursor: pointer;
}
.qr-reader-shell,
.hash-card,
.morse-keyer {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 12px 34px rgba(30, 35, 30, 0.055);
}
.qr-reader-shell { padding: 18px; }
.qr-reader-intro { margin-top: 0; }
.qr-reader-actions,
.hash-result-card,
.hash-compare-card,
.morse-keyer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.qr-reader-actions button,
.qr-reader-file,
.hash-card button,
.morse-keyer-actions button {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: inherit;
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.qr-reader-actions button:disabled,
.hash-card button:disabled { opacity: .5; cursor: not-allowed; }
.qr-reader-file { display: inline-flex; align-items: center; gap: 8px; }
.qr-reader-file input { max-width: 220px; }
.qr-reader-stage {
  min-height: 280px;
  margin-top: 16px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(128,128,128,.055);
}
#qr-reader-video {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  background: #111;
}
.qr-reader-empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.qr-reader-status,
.hash-status { min-height: 1.5em; margin: 12px 0 0; font-weight: 700; }
.qr-reader-status[data-tone="error"],
.hash-status[data-tone="error"],
.hash-comparison[data-tone="error"] { color: #a3261f; }
.qr-reader-status[data-tone="warning"],
.hash-status[data-tone="warning"] { color: #8b6512; }
.qr-reader-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.qr-reader-result-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.qr-reader-result textarea,
.hash-card textarea,
.hash-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: inherit;
  font: inherit;
  padding: 11px 12px;
}
.qr-reader-result textarea,
.hash-result-card textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.qr-reader-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.qr-reader-result-actions a { font-weight: 800; align-self: center; }
.qr-reader-private,
.hash-help,
.hash-note,
.morse-keyer-note { color: var(--muted); font-size: .91rem; }

.hash-tool { display: grid; gap: 16px; }
.hash-card { padding: 18px; }
.hash-card label { display: grid; gap: 7px; font-weight: 800; }
.hash-settings { max-width: 360px; margin-bottom: 16px; }
.hash-file-label input { display: block; width: 100%; margin-top: 7px; }
.hash-calculate { margin-top: 14px; }
.hash-details { margin: 3px 0 0; color: var(--muted); font-size: .9rem; }
.hash-result-card,
.hash-compare-card { align-items: stretch; }
.hash-result-card label,
.hash-compare-card label { flex: 1 1 100%; }
.hash-compare-card h2 { margin: 0; flex-basis: 100%; }
.hash-compare-card > p { flex-basis: 100%; margin: 0; }
.hash-comparison { flex-basis: 100%; margin: 0; font-weight: 800; }
.hash-comparison[data-tone="success"] { color: #2e6b37; }
.hash-note { padding: 14px 16px; border-left: 4px solid currentColor; background: rgba(128,128,128,.05); border-radius: 0 12px 12px 0; }

.morse-keyer { margin-top: 18px; padding: 18px; }
.morse-keyer-head { display: grid; grid-template-columns: 1fr minmax(180px, 250px); gap: 18px; align-items: end; }
.morse-keyer-head h3 { margin: 2px 0 4px; }
.morse-keyer-head p { margin: 0; }
.morse-keyer-frequency { display: grid; gap: 5px; font-weight: 800; }
.morse-keyer-button {
  width: 100%;
  min-height: 118px;
  margin: 18px 0 14px;
  border: 2px solid currentColor;
  border-radius: 20px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
}
.morse-keyer-button .morse-keyer-main { font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: .08em; }
.morse-keyer-button.is-pressed { transform: translateY(2px); }
.morse-keyer-output { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.morse-keyer-output label { display: grid; gap: 6px; font-weight: 800; }
.morse-keyer-output textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--white); color: inherit; }
#morse-keyer-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.morse-keyer-actions { margin-top: 12px; }

@media (max-width: 720px) {
  .qr-reader-actions { align-items: stretch; }
  .qr-reader-actions > * { width: 100%; justify-content: center; }
  .qr-reader-file input { max-width: 100%; }
  .qr-reader-stage { min-height: 220px; }
  .morse-keyer-head,
  .morse-keyer-output { grid-template-columns: 1fr; }
  .morse-keyer-button { min-height: 104px; }
  .morse-keyer-actions > button { flex: 1 1 46%; }
}


.qr-suite-tab.is-active,
.hash-mode-tab.is-active,
.morse-keyer-button.is-pressed {
  background: var(--forest-dark);
  border-color: var(--forest-dark);
  color: var(--white);
}

/* ===== V7 · ajuste compacto Recursos QR / Hashes / Morse ===== */
.qr-suite-tabs,
.hash-mode-tabs {
  gap: 7px;
  margin-bottom: 14px;
}
.qr-suite-tab,
.hash-mode-tab {
  border-radius: 10px;
  padding: 7px 12px;
  font-size: .88rem;
  line-height: 1.15;
}

.qr-reader-shell,
.hash-tool,
.morse-keyer {
  width: min(100%, 860px);
  box-sizing: border-box;
}
.qr-reader-shell,
.morse-keyer {
  margin-right: auto;
}
.hash-tool {
  gap: 12px;
}
.hash-card,
.qr-reader-shell,
.morse-keyer {
  border-radius: 16px;
}
.hash-card {
  padding: 14px;
}
.qr-reader-shell {
  padding: 14px;
}
.hash-settings {
  max-width: 320px;
  margin-bottom: 12px;
}
.hash-calculate {
  margin-top: 10px;
}
.qr-reader-actions,
.hash-result-card,
.hash-compare-card,
.morse-keyer-actions {
  gap: 8px;
}
.qr-reader-actions button,
.qr-reader-file,
.hash-card button,
.morse-keyer-actions button {
  border-radius: 9px;
  padding: 7px 11px;
  font-size: .88rem;
  line-height: 1.2;
}
.hash-card textarea,
.hash-card select,
.qr-reader-result textarea {
  padding: 9px 10px;
  border-radius: 10px;
}
#hash-output {
  min-height: 70px;
}
#hash-expected {
  min-height: 58px;
}
.qr-reader-stage {
  min-height: 210px;
  margin-top: 12px;
  border-radius: 13px;
}
.qr-reader-empty {
  padding: 30px 18px;
}
#qr-reader-video {
  max-height: 380px;
}
.qr-reader-result {
  margin-top: 12px;
  padding-top: 12px;
}
.qr-reader-private,
.hash-help,
.hash-note,
.morse-keyer-note {
  font-size: .86rem;
}
.hash-note {
  padding: 11px 13px;
}
.morse-keyer {
  margin-top: 14px;
  padding: 14px;
}
.morse-keyer-head {
  grid-template-columns: 1fr minmax(165px, 225px);
  gap: 14px;
}
.morse-keyer-button {
  width: min(100%, 560px);
  min-height: 86px;
  margin: 14px auto 11px;
  border-radius: 14px;
}
.morse-keyer-button .morse-keyer-main {
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
}
.morse-keyer-output {
  gap: 10px;
}
.morse-keyer-output textarea {
  padding: 9px 10px;
  border-radius: 10px;
}
.morse-keyer-actions {
  margin-top: 10px;
}

@media (max-width: 720px) {
  .qr-reader-shell,
  .hash-tool,
  .morse-keyer {
    width: 100%;
  }
  .qr-reader-actions > * {
    width: 100%;
  }
  .qr-reader-stage {
    min-height: 180px;
  }
  .morse-keyer-button {
    min-height: 82px;
    width: 100%;
  }
}


/* ===== V7 · Entorno y observación: meteorología, Sol y Luna ===== */
.env-tool{display:grid;gap:14px;max-width:980px}.env-location-card,.env-panel{border:1px solid var(--line);border-radius:16px;background:var(--white);padding:15px}.env-location-card h2,.env-panel h2{margin:0 0 5px}.env-location-card p{margin:0 0 12px;color:var(--muted);font-size:.88rem}.env-location-grid{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:8px;align-items:end}.env-location-grid label,.env-coords label,.env-date-row label,.env-solar-form label{display:grid;gap:5px;font-weight:800;font-size:.8rem}.env-location-grid input,.env-coords input,.env-date-row input,.env-solar-form input{border:1px solid var(--line);border-radius:9px;background:var(--white);color:inherit;padding:8px 10px;font:inherit}.env-location-grid button,.env-coords button,.env-panel button,.env-tab,.env-search-results button{border:1px solid var(--line);border-radius:9px;background:var(--white);color:inherit;padding:7px 11px;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer}.env-coords{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:10px}.env-coords label{width:min(180px,100%)}.env-status{margin:10px 0 0;color:var(--muted);font-size:.82rem}.env-search-results{display:grid;gap:4px;margin-top:8px;padding:6px;border:1px solid var(--line);border-radius:11px;background:rgba(128,128,128,.035)}.env-search-results button{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left}.env-search-results span,.env-search-results small{color:var(--muted);font-weight:500}.env-search-results small{grid-column:1/-1}.env-tabs{display:flex;flex-wrap:wrap;gap:7px}.env-tab{padding:7px 11px;border-radius:9px}.env-tab.is-active{font-weight:850}.env-panel-head,.env-date-row,.env-solar-form{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:end}.env-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}.env-metric{display:grid;gap:2px;min-height:88px;padding:11px;border:1px solid var(--line);border-radius:11px;background:rgba(128,128,128,.035)}.env-metric strong{font-size:1.05rem;line-height:1.2}.env-metric span{font-size:.72rem;color:var(--muted)}.env-metric small{font-size:.69rem;color:var(--muted)}.env-forecast-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.env-forecast-day{display:grid;gap:4px;padding:11px;border:1px solid var(--line);border-radius:11px;background:rgba(128,128,128,.035)}.env-forecast-day span,.env-forecast-day small{color:var(--muted);font-size:.74rem}.env-note,.env-attribution,.env-empty{color:var(--muted);font-size:.78rem}.env-attribution{margin:0}.env-solar-form{justify-content:flex-start}.env-solar-form label{min-width:240px}
/* Ocio y Naturaleza */
body[data-section="recursos"] .env-tab.is-active{background:var(--forest-dark);border-color:var(--forest-dark);color:var(--white)}
@media(max-width:860px){.env-location-grid{grid-template-columns:1fr 1fr}.env-location-grid label{grid-column:1/-1}.env-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.env-forecast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.env-location-grid{grid-template-columns:1fr}.env-location-grid label{grid-column:auto}.env-location-grid button,.env-coords button{width:100%}.env-coords{display:grid;grid-template-columns:1fr 1fr}.env-coords label{width:auto}.env-coords button{grid-column:1/-1}.env-metric-grid,.env-forecast-grid{grid-template-columns:1fr}.env-tabs{gap:5px}.env-tab{font-size:.8rem;padding:6px 9px}.env-panel,.env-location-card{padding:12px}}


/* ===== V7 · iconografía meteorológica local ===== */
.env-weather-icon{display:block;width:38px;height:38px;object-fit:contain;flex:0 0 auto}.env-weather-icon--current{width:44px;height:44px}.env-weather-icon--forecast{width:38px;height:38px;margin:1px 0 2px}.env-metric--weather{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px}.env-metric--weather>div{display:grid;gap:2px;min-width:0}.env-forecast-day .env-weather-icon{justify-self:start}@media(max-width:520px){.env-weather-icon--current{width:40px;height:40px}.env-weather-icon--forecast{width:35px;height:35px}}


/* Geografía y datos geográficos */
.geo-tool{display:grid;gap:12px;max-width:980px}.geo-tabs{display:flex;flex-wrap:wrap;gap:6px}.geo-tab,.geo-actions button,.geo-file-pick{border:1px solid var(--line);border-radius:9px;background:var(--white);color:inherit;padding:7px 11px;font:inherit;font-size:.84rem;font-weight:800;cursor:pointer}.geo-tab.is-active{font-weight:900}.geo-panel{border:1px solid var(--line);border-radius:15px;background:var(--white);padding:14px}.geo-panel h2{margin:0 0 4px}.geo-intro,.geo-note,.geo-status,.geo-empty{color:var(--muted);font-size:.8rem}.geo-convert-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.geo-box{border:1px solid var(--line);border-radius:11px;padding:11px;background:rgba(128,128,128,.03)}.geo-box h3{margin:0 0 8px}.geo-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.geo-fields--utm{grid-template-columns:.65fr .8fr 1.2fr 1.2fr}.geo-fields label{display:grid;gap:4px;font-size:.76rem;font-weight:800}.geo-fields input,.geo-fields select{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--white);color:inherit;padding:7px 8px;font:inherit}.geo-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.geo-result{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:rgba(128,128,128,.035);font-size:.86rem}.geo-file-pick{display:inline-flex;align-items:center;gap:8px;margin-top:8px}.geo-file-pick input{max-width:250px}.geo-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.geo-stat{display:grid;gap:2px;border:1px solid var(--line);border-radius:10px;padding:9px;background:rgba(128,128,128,.035)}.geo-stat strong{font-size:.94rem}.geo-stat span{font-size:.72rem;color:var(--muted);overflow-wrap:anywhere}.geo-actions--exports{margin-top:10px}.geo-status{margin:0}
@media(max-width:760px){.geo-convert-grid{grid-template-columns:1fr}.geo-fields--utm{grid-template-columns:1fr 1fr}.geo-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.geo-panel{padding:12px}.geo-fields,.geo-fields--utm,.geo-stat-grid{grid-template-columns:1fr}.geo-actions button,.geo-file-pick{width:100%;justify-content:center}.geo-file-pick{display:grid}.geo-file-pick input{max-width:100%;width:100%}}

/* Meteorología compacta: mapa de contexto + gráficos SVG sin librerías */
.env-overview-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.75fr);gap:10px;align-items:stretch}.env-location-card{padding:12px}.env-location-card p{margin-bottom:8px}.env-location-grid{grid-template-columns:minmax(180px,1fr) auto auto;gap:6px}.env-location-grid input,.env-coords input{padding:7px 9px}.env-location-grid button,.env-coords button{padding:6px 9px;font-size:.82rem}.env-coords{margin-top:7px;gap:6px}.env-status{margin-top:7px}.env-mini-map-card{border:1px solid var(--line);border-radius:16px;background:var(--white);padding:10px;display:grid;grid-template-rows:auto 1fr;min-height:188px}.env-mini-map-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.env-mini-map-head h2{margin:0;font-size:1rem}.env-mini-map-head a{font-size:.75rem;font-weight:800}.env-mini-map{width:100%;height:145px;border:0;border-radius:10px;background:#edf1ec}.env-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.env-chart-card{border:1px solid var(--line);border-radius:11px;padding:8px;background:rgba(128,128,128,.025);min-width:0}.env-chart-card h3{margin:0 0 3px;font-size:.82rem}.env-chart-card svg{display:block;width:100%;height:auto;min-height:105px}.env-chart-legend{display:flex;flex-wrap:wrap;gap:7px;color:var(--muted);font-size:.66rem;margin-top:2px}.env-chart-legend i{display:inline-block;width:9px;height:3px;border-radius:2px;margin-right:3px;vertical-align:middle}.env-forecast-grid{margin-top:9px}
@media(max-width:860px){.env-overview-grid{grid-template-columns:1fr}.env-mini-map-card{min-height:auto}.env-mini-map{height:165px}.env-chart-grid{grid-template-columns:1fr 1fr}.env-chart-card:first-child{grid-column:1/-1}}
@media(max-width:520px){.env-chart-grid{grid-template-columns:1fr}.env-chart-card:first-child{grid-column:auto}.env-mini-map{height:150px}}



/* ===== V7 · ajuste compacto Meteorología + vista previa geográfica ===== */
.env-tool{gap:10px}
.env-overview-grid{grid-template-columns:minmax(250px,.78fr) minmax(340px,1.22fr);gap:9px;align-items:start}
.env-location-card{padding:10px}
.env-location-card h2{font-size:1rem;margin-bottom:3px}
.env-location-card p{margin-bottom:6px;font-size:.8rem;line-height:1.35}
.env-location-grid{grid-template-columns:minmax(150px,1fr) auto auto;gap:5px}
.env-location-grid input,.env-coords input{padding:6px 8px}
.env-location-grid button,.env-coords button{padding:5px 8px;font-size:.8rem}
.env-coords{margin-top:6px;gap:5px}
.env-coords label{width:min(145px,100%)}
.env-status{margin-top:6px;font-size:.76rem}
.env-mini-map-card{padding:8px;min-height:218px;grid-template-rows:auto minmax(176px,1fr)}
.env-mini-map-head{margin-bottom:5px}
.env-mini-map{height:100%;min-height:176px}
.env-panel{padding:10px}
.env-panel h2{font-size:1.05rem}
.env-panel-head,.env-date-row,.env-solar-form{gap:7px}
.env-metric-grid{gap:6px;margin-top:8px}
.env-metric{min-height:66px;padding:8px;border-radius:10px}
.env-metric strong{font-size:.98rem}
.env-metric span{font-size:.69rem}
.env-metric small{font-size:.65rem}
.env-chart-grid{gap:6px;margin:8px 0}
.env-chart-card{padding:7px}
.env-chart-card svg{min-height:86px}
.env-forecast-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:8px}
.env-forecast-day{gap:2px;padding:7px;border-radius:10px;min-width:0}
.env-forecast-day strong{font-size:.76rem;line-height:1.15}
.env-forecast-day b{font-size:.78rem}
.env-forecast-day span,.env-forecast-day small{font-size:.66rem;line-height:1.25}
.env-weather-icon--forecast{width:32px;height:32px;margin:0}
.env-weather-icon--current{width:40px;height:40px}
.env-tabs{gap:5px}
.env-tab{padding:6px 9px;font-size:.8rem}

.geo-tool{gap:10px}
.geo-panel{padding:11px}
.geo-panel h2{font-size:1.05rem}
.geo-intro{margin:.2rem 0 .55rem;line-height:1.35}
.geo-convert-grid{gap:8px;margin-top:7px}
.geo-box{padding:9px}
.geo-box h3{margin-bottom:6px;font-size:.96rem}
.geo-fields{gap:6px}
.geo-fields input,.geo-fields select{padding:6px 7px}
.geo-actions{gap:5px;margin-top:7px}
.geo-actions button,.geo-file-pick{padding:6px 9px;font-size:.8rem}
.geo-preview-grid{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(300px,1.28fr);gap:8px;align-items:stretch;margin-top:8px}
.geo-preview-grid .geo-result{margin:0;display:flex;align-items:center;min-height:90px}
.geo-mini-map-card{border:1px solid var(--line);border-radius:11px;background:var(--white);padding:7px;display:grid;grid-template-rows:auto minmax(150px,1fr);min-height:186px}
.geo-mini-map-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.geo-mini-map-head h3{margin:0;font-size:.9rem}
.geo-mini-map-head button{border:1px solid var(--line);border-radius:8px;background:var(--white);color:inherit;padding:5px 8px;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer}
.geo-mini-map{width:100%;height:100%;min-height:150px;border:0;border-radius:8px;background:#edf1ec}
.geo-stat-grid{gap:6px;margin-top:8px}
.geo-stat{padding:7px}

@media(max-width:900px){
  .env-overview-grid{grid-template-columns:1fr}
  .env-mini-map-card{min-height:auto}
  .env-mini-map{min-height:185px;height:185px}
  .env-forecast-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .env-chart-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .geo-preview-grid{grid-template-columns:1fr 1.2fr}
}
@media(max-width:680px){
  .env-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .env-forecast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .env-chart-grid{grid-template-columns:1fr}
  .env-chart-card:first-child{grid-column:auto}
  .geo-preview-grid{grid-template-columns:1fr}
  .geo-mini-map-card{min-height:auto}
  .geo-mini-map{height:170px;min-height:170px}
}
@media(max-width:390px){
  .env-forecast-grid{grid-template-columns:1fr}
  .env-location-grid{grid-template-columns:1fr}
  .env-location-grid label{grid-column:auto}
  .env-coords{grid-template-columns:1fr 1fr}
}

/* ===== V7 · ajuste final de mapas contextuales y ubicación compacta ===== */
.env-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:start}
.env-location-card{align-self:start}
.env-location-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.env-location-head>div{min-width:0}
.env-location-head p{margin-bottom:5px}
#env-location-toggle{border:1px solid var(--line);border-radius:8px;background:var(--white);color:inherit;padding:5px 8px;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;white-space:nowrap}
.env-location-controls[hidden],.env-location-summary[hidden],.env-search-results[hidden],#env-location-toggle[hidden]{display:none!important}
.env-location-summary{display:grid;gap:2px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;background:rgba(128,128,128,.025);margin-top:4px}
.env-location-summary strong{font-size:.86rem}.env-location-summary span{font-size:.72rem;color:var(--muted)}
.env-location-card.is-collapsed{padding:9px 10px}
.env-location-card.is-collapsed .env-location-head p{display:none}
.env-location-card.is-collapsed .env-status{margin-top:5px}
.env-search-results{max-height:148px;overflow:auto}
.env-mini-map-card{min-height:0;align-self:start}
.env-mini-map{height:clamp(215px,23vw,255px);min-height:215px}
.env-chart-card svg{min-height:76px}
.env-chart-grid{margin:6px 0}.env-forecast-grid{margin-top:6px}.env-forecast-day{padding:6px}
.env-panel{padding:9px}.env-metric{min-height:60px;padding:7px}.env-metric-grid{margin-top:6px}
.geo-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
.geo-preview-grid .geo-result{min-height:0;align-items:flex-start}
.geo-mini-map-card{min-height:0;align-self:start}
.geo-mini-map{height:clamp(225px,25vw,275px);min-height:225px}
@media(max-width:900px){.env-overview-grid{grid-template-columns:1fr}.env-mini-map{height:220px;min-height:220px}.geo-preview-grid{grid-template-columns:1fr}.geo-mini-map{height:230px;min-height:230px}}
@media(max-width:520px){.env-mini-map{height:200px;min-height:200px}.geo-mini-map{height:205px;min-height:205px}.env-location-head{align-items:center}}

/* Recursos · LoRa/Meshtastic compacto + posición */
body[data-page="recursos-lora"] .communications-section{display:grid;gap:12px}
body[data-page="recursos-lora"] .communications-intro{margin:0;max-width:78ch}
body[data-page="recursos-lora"] .communications-card{padding:14px;border-radius:16px}
body[data-page="recursos-lora"] .communications-card-head{margin-bottom:8px}
body[data-page="recursos-lora"] .meshtastic-options.compact-options{gap:7px}
body[data-page="recursos-lora"] .meshtastic-options.compact-options>div{padding:9px 10px;border-radius:10px}
body[data-page="recursos-lora"] .meshtastic-actions{margin-top:9px;gap:8px}
body[data-page="recursos-lora"] .mini-meshtastic.prominent{padding:14px;border-radius:17px}
body[data-page="recursos-lora"] .mini-mesh-intro{margin:4px 0 10px}
body[data-page="recursos-lora"] .mini-mesh-support{gap:7px}
body[data-page="recursos-lora"] .mini-mesh-support>div,body[data-page="recursos-lora"] .mini-mesh-diagnostics>div{padding:7px 9px}
body[data-page="recursos-lora"] .mini-mesh-actions{margin:8px 0;gap:6px}
body[data-page="recursos-lora"] .mini-mesh-actions button{padding:7px 10px;min-height:34px}
body[data-page="recursos-lora"] .mini-mesh-chat{margin-top:10px;padding:10px}
body[data-page="recursos-lora"] .mini-mesh-log{min-height:120px;max-height:190px}
body[data-page="recursos-lora"] .mini-mesh-compose textarea{min-height:58px}
.mini-mesh-position{margin:8px 0 0;border:1px solid var(--line);border-radius:12px;padding:9px 10px;background:rgba(255,255,255,.48)}
.mini-mesh-position-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.mini-mesh-position-head>div:first-child{min-width:0}.mini-mesh-position-head span{display:block;font-size:.72rem;color:var(--muted)}.mini-mesh-position-head strong{display:block;font-size:.84rem;overflow-wrap:anywhere}.mini-mesh-position-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.mini-mesh-position-actions button,.mini-mesh-position-actions a{border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:#fff;color:inherit;font:inherit;font-size:.78rem;font-weight:700;text-decoration:none}.mini-mesh-position-actions button:disabled{opacity:.48}.mini-mesh-position iframe{width:100%;aspect-ratio:2.35/1;border:0;border-radius:9px;margin-top:8px}.mini-mesh-position p{margin:7px 0 0;font-size:.72rem;color:var(--muted)}
@media(max-width:680px){.mini-mesh-position-head{align-items:flex-start;flex-direction:column}.mini-mesh-position iframe{aspect-ratio:1.45/1}}


/* =========================================================
   HATARJA V7 — acabado compacto LoRa/Meshtastic
   ========================================================= */
body[data-page="recursos-lora"] .communications-section{gap:8px}
body[data-page="recursos-lora"] .communications-section>h2{margin-bottom:0;font-size:1.18rem}
body[data-page="recursos-lora"] .communications-intro{font-size:.82rem;line-height:1.42;max-width:72ch}
body[data-page="recursos-lora"] .meshtastic-ecosystem{padding:0!important;overflow:hidden;border-radius:12px}
body[data-page="recursos-lora"] .meshtastic-ecosystem>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;cursor:pointer;background:rgba(255,255,255,.48)}
body[data-page="recursos-lora"] .meshtastic-ecosystem>summary::-webkit-details-marker{display:none}
body[data-page="recursos-lora"] .meshtastic-ecosystem>summary>span:first-child{display:grid;gap:1px}
body[data-page="recursos-lora"] .meshtastic-ecosystem>summary strong{font-size:.83rem}
body[data-page="recursos-lora"] .meshtastic-ecosystem>summary small{color:var(--muted);font-size:.67rem}
body[data-page="recursos-lora"] .meshtastic-ecosystem-body{padding:8px 10px 10px;border-top:1px solid var(--line)}
body[data-page="recursos-lora"] .meshtastic-options.compact-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
body[data-page="recursos-lora"] .meshtastic-options.compact-options>div{padding:6px 7px;border-radius:8px;font-size:.68rem}
body[data-page="recursos-lora"] .meshtastic-actions{margin-top:6px;gap:6px}
body[data-page="recursos-lora"] .meshtastic-actions .button,body[data-page="recursos-lora"] .meshtastic-actions a{font-size:.70rem;padding:6px 8px}
body[data-page="recursos-lora"] .meshtastic-security-note{margin:6px 0 0!important;font-size:.65rem!important}
body[data-page="recursos-lora"] .mini-meshtastic.prominent{margin-top:2px;padding:10px;border-width:1px;border-radius:13px}
body[data-page="recursos-lora"] .mini-meshtastic.prominent::before{margin-bottom:4px;font-size:.56rem}
body[data-page="recursos-lora"] .mini-mesh-head{align-items:center}
body[data-page="recursos-lora"] .mini-mesh-head h3{margin:0;font-size:1rem}
body[data-page="recursos-lora"] .mini-mesh-intro{margin:3px 0 7px!important;font-size:.68rem!important;line-height:1.4}
body[data-page="recursos-lora"] .mini-mesh-support{gap:5px}
body[data-page="recursos-lora"] .mini-mesh-support>div{padding:5px 7px;font-size:.64rem}
body[data-page="recursos-lora"] .mini-mesh-actions{margin:6px 0;gap:5px}
body[data-page="recursos-lora"] .mini-mesh-actions button{min-height:30px;padding:5px 8px;font-size:.67rem}
body[data-page="recursos-lora"] .mini-mesh-device-row{margin-top:6px;padding:5px 7px;font-size:.64rem}
body[data-page="recursos-lora"] .mini-mesh-status{margin:4px 0 0!important;font-size:.64rem!important}
body[data-page="recursos-lora"] .mini-mesh-diagnostic-details{margin-top:5px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.35)}
body[data-page="recursos-lora"] .mini-mesh-diagnostic-details>summary{cursor:pointer;padding:6px 8px;font-size:.66rem;font-weight:760;color:var(--muted)}
body[data-page="recursos-lora"] .mini-mesh-diagnostic-details .mini-mesh-diagnostics{margin:0;padding:0 7px 7px;gap:5px}
body[data-page="recursos-lora"] .mini-mesh-diagnostics>div{padding:5px 6px}
body[data-page="recursos-lora"] .mini-mesh-position{padding:7px 8px;margin-top:6px}
body[data-page="recursos-lora"] .mini-mesh-position iframe{aspect-ratio:2.1/1}
body[data-page="recursos-lora"] .mini-mesh-position p{font-size:.65rem;margin-top:5px}
body[data-page="recursos-lora"] .mini-mesh-chat{margin-top:7px;padding-top:7px}
body[data-page="recursos-lora"] .mini-mesh-chat-toolbar{gap:6px}
body[data-page="recursos-lora"] .mini-mesh-chat-toolbar select{min-height:30px}
body[data-page="recursos-lora"] .mini-mesh-log{min-height:88px;max-height:155px;margin-top:6px}
body[data-page="recursos-lora"] .mini-mesh-compose{margin-top:6px}
body[data-page="recursos-lora"] .mini-mesh-compose textarea{min-height:48px}
body[data-page="recursos-lora"] .mini-mesh-note{font-size:.60rem!important;margin-top:5px!important;padding-top:5px}
@media(max-width:760px){body[data-page="recursos-lora"] .meshtastic-options.compact-options{grid-template-columns:1fr}body[data-page="recursos-lora"] .mini-meshtastic.prominent{padding:9px}}

/* =========================================================
   HATARJA V7 — Área privada equilibrada y menos panorámica
   ========================================================= */
.private-locked{width:min(100%,520px)}
.private-lock-card{grid-template-columns:minmax(0,1fr) 34px;gap:10px;padding:10px 11px;border-radius:12px}
.private-login-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 8px}
.private-login-button{grid-column:1/-1;justify-self:start;min-width:108px;min-height:31px;padding:5px 12px}
.private-lock-mark{width:32px;height:32px}
@media(max-width:560px){.private-locked{width:100%}.private-login-grid{grid-template-columns:1fr}.private-login-button{grid-column:1;width:100%}.private-lock-card{grid-template-columns:minmax(0,1fr) 32px}}



/* ===== V7 · ajuste final Área privada + Meshtastic compacto ===== */
/* Área privada: campos anchos, botón en fila propia y sin solapamientos */
.private-locked{width:min(100%,660px)!important}
.private-lock-card{position:relative!important;display:block!important;width:100%!important;padding:13px 58px 12px 14px!important;border-radius:13px!important;box-sizing:border-box!important}
.private-lock-mark{position:absolute!important;top:12px!important;right:13px!important;width:34px!important;height:34px!important;margin:0!important}
.private-login-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:"user password" "action action" "error error"!important;gap:9px 12px!important;align-items:end!important;width:100%!important;margin:0!important}
.private-login-grid .private-field:nth-of-type(1){grid-area:user!important}
.private-login-grid .private-field:nth-of-type(2){grid-area:password!important}
.private-field,.private-input-wrap,.private-input-wrap input{width:100%!important;min-width:0!important;box-sizing:border-box!important}
.private-login-button{grid-area:action!important;grid-column:auto!important;justify-self:start!important;min-width:118px!important;min-height:32px!important;margin-top:1px!important;padding:6px 13px!important}
.private-access-error{grid-area:error!important;grid-column:auto!important}
@media(max-width:640px){.private-locked{width:100%!important}.private-lock-card{padding:12px 12px 11px!important}.private-lock-mark{display:none!important}.private-login-grid{grid-template-columns:1fr!important;grid-template-areas:"user" "password" "action" "error"!important}.private-login-button{width:100%!important;justify-self:stretch!important}}

/* Meshtastic: marco principal contenido y posición visible incluso antes de recibir GPS */
body[data-page="recursos-lora"] .communications-shell{max-width:790px!important;justify-self:start!important}
body[data-page="recursos-lora"] .communications-section{max-width:790px!important}
body[data-page="recursos-lora"] .meshtastic-ecosystem,body[data-page="recursos-lora"] .mini-meshtastic.prominent{width:100%!important;max-width:760px!important}
body[data-page="recursos-lora"] .mini-meshtastic.prominent{padding:9px 10px!important}
body[data-page="recursos-lora"] .mini-mesh-support{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body[data-page="recursos-lora"] .mini-mesh-position{max-width:560px!important;padding:7px 8px!important;margin-top:6px!important}
body[data-page="recursos-lora"] .mini-mesh-position iframe{display:block;width:min(100%,430px)!important;aspect-ratio:4/3!important;height:auto!important;min-height:0!important;border:0;border-radius:9px;margin:8px 0 0!important;background:#edf1ec}
body[data-page="recursos-lora"] .mini-mesh-position iframe[hidden]{display:none!important}
body[data-page="recursos-lora"] .mini-mesh-position p{max-width:72ch!important}
@media(max-width:820px){body[data-page="recursos-lora"] .communications-shell,body[data-page="recursos-lora"] .communications-section,body[data-page="recursos-lora"] .meshtastic-ecosystem,body[data-page="recursos-lora"] .mini-meshtastic.prominent{max-width:none!important;width:100%!important}}
@media(max-width:520px){body[data-page="recursos-lora"] .mini-mesh-support{grid-template-columns:1fr!important}body[data-page="recursos-lora"] .mini-mesh-position{max-width:none!important}body[data-page="recursos-lora"] .mini-mesh-position iframe{width:100%!important;aspect-ratio:1.15/1!important}}

/* ===== V7 · Meshtastic: diagnóstico siempre visible y mapa final centrado ===== */
body[data-page="recursos-lora"] .mini-mesh-diagnostic-static{margin-top:5px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.35);padding:6px 7px 7px}
body[data-page="recursos-lora"] .mini-mesh-diagnostic-static h4{margin:0 0 5px;font-size:.66rem;font-weight:760;color:var(--muted)}
body[data-page="recursos-lora"] .mini-mesh-diagnostic-static .mini-mesh-diagnostics{margin:0;padding:0;gap:5px}
body[data-page="recursos-lora"] .mini-mesh-position{width:min(100%,560px)!important;max-width:560px!important;margin:10px auto 0!important;text-align:center}
body[data-page="recursos-lora"] .mini-mesh-position-head{justify-content:center!important;flex-direction:column!important;gap:7px!important}
body[data-page="recursos-lora"] .mini-mesh-position-actions{justify-content:center!important}
body[data-page="recursos-lora"] .mini-mesh-position iframe{margin:8px auto 0!important}
body[data-page="recursos-lora"] .mini-mesh-position p{margin:6px auto 0!important;max-width:58ch!important;text-align:center}
@media(max-width:520px){body[data-page="recursos-lora"] .mini-mesh-position{width:100%!important;max-width:none!important}}


/* ===== V7 · Área privada: formulario vertical definitivo ===== */
.private-locked{width:min(100%,440px)!important}
.private-lock-card{position:relative!important;display:block!important;width:100%!important;padding:14px 56px 13px 14px!important;border-radius:13px!important;box-sizing:border-box!important}
.private-login-grid{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"user" "password" "action" "error"!important;gap:9px!important;width:100%!important;margin:0!important;align-items:stretch!important}
.private-login-grid .private-field:nth-of-type(1){grid-area:user!important}
.private-login-grid .private-field:nth-of-type(2){grid-area:password!important}
.private-field,.private-input-wrap,.private-input-wrap input{width:100%!important;min-width:0!important;box-sizing:border-box!important}
.private-login-button{grid-area:action!important;grid-column:1!important;justify-self:start!important;min-width:124px!important;min-height:33px!important;margin:1px 0 0!important;padding:6px 14px!important}
.private-access-error{grid-area:error!important;grid-column:1!important;margin:0!important}
.private-lock-mark{position:absolute!important;top:13px!important;right:13px!important;width:32px!important;height:32px!important;margin:0!important}
@media(max-width:520px){.private-locked{width:100%!important}.private-lock-card{padding:12px!important}.private-lock-mark{display:none!important}.private-login-button{width:100%!important;justify-self:stretch!important}}


/* =========================================================
   HATARJA V7 — Talleres y Actividades + Bitácora (prototipo funcional)
   ========================================================= */
.activity-shell,.journal-shell{display:grid;gap:14px}
.activity-demo-note{border:1px dashed color-mix(in srgb,var(--forest) 40%,var(--line));background:rgba(255,255,255,.42);border-radius:10px;padding:7px 10px;font-size:.72rem;color:var(--muted)}
.activity-layout{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.45fr);gap:14px;align-items:start}
.activity-side{display:grid;gap:10px;position:sticky;top:92px}
.activity-panel,.activity-calendar-card{border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.52);box-shadow:0 9px 24px rgba(38,41,36,.045)}
.activity-panel{padding:12px}
.activity-panel .eyebrow{margin-bottom:3px}
.activity-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.activity-panel-heading h2{margin:0;font-size:.94rem}.activity-panel-heading span{font-size:.66rem;color:var(--muted)}
.activity-mini-list{display:grid;gap:7px}.activity-mini-list article{padding-top:7px;border-top:1px solid var(--line)}.activity-mini-list article:first-child{padding-top:0;border-top:0}.activity-mini-list strong{font-size:.78rem}.activity-mini-list p{margin:2px 0 0;font-size:.7rem;color:var(--muted);line-height:1.38}
.activity-calendar-card{padding:13px;min-width:0}
.activity-calendar-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.activity-calendar-head h2{margin:1px 0 0;font-size:1.12rem;text-transform:capitalize}.activity-calendar-head .eyebrow{margin:0}
.activity-view-tabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.activity-view-tabs button,.activity-calendar-nav button{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:5px 8px;font:inherit;font-size:.7rem;font-weight:750;cursor:pointer}.activity-view-tabs button.is-active{background:var(--forest);border-color:var(--forest);color:white}.activity-calendar-nav{display:flex;justify-content:flex-end;gap:5px;margin:8px 0}.activity-calendar-nav button:disabled{opacity:.35;cursor:default}
.activity-calendar{min-height:240px}.activity-empty{margin:10px 0;color:var(--muted);font-size:.78rem}
.activity-event{display:grid;grid-template-columns:42px 1fr;gap:9px;align-items:start;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.68);padding:8px;cursor:pointer}.activity-event+.activity-event{margin-top:7px}.activity-event:focus-visible,.activity-event:hover{outline:none;border-color:var(--forest);box-shadow:0 0 0 2px color-mix(in srgb,var(--forest) 16%,transparent)}
.activity-date-badge{display:grid;place-items:center;border-radius:9px;background:var(--paper-2);padding:5px 2px;line-height:1}.activity-date-badge strong{font-size:1.04rem}.activity-date-badge span{font-size:.58rem;text-transform:uppercase;color:var(--muted);margin-top:3px}
.activity-event-meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:.59rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.activity-event-meta em,.journal-meta em{font-style:normal;border-radius:999px;background:rgba(78,93,77,.1);padding:2px 5px}.activity-event h3{margin:2px 0 1px;font-size:.82rem;line-height:1.25}.activity-event p{margin:0;font-size:.68rem;color:var(--muted)}.activity-event small{display:block;margin-top:3px;font-size:.66rem;line-height:1.35;color:var(--muted)}
.activity-next-panel .activity-event{border:0;background:transparent;padding:3px 0}.activity-next-panel .activity-event:hover{box-shadow:none}
.activity-detail{border-color:color-mix(in srgb,var(--forest) 35%,var(--line))}.activity-detail h3{font-size:.94rem;margin:6px 0 4px}.activity-detail p{font-size:.71rem;margin:4px 0;color:var(--muted)}.activity-detail-close{border:0;background:transparent;font-size:1.25rem;cursor:pointer;color:var(--muted)}.activity-chip{display:inline-block;font-size:.62rem;font-weight:750;padding:3px 7px;border-radius:999px;background:var(--paper-2)}.activity-ics{margin-top:7px;font-size:.7rem!important;padding:6px 9px!important}
.activity-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.activity-week-day{min-width:0;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.48);overflow:hidden}.activity-week-day>header{display:flex;justify-content:space-between;align-items:center;padding:5px 6px;border-bottom:1px solid var(--line);font-size:.62rem;text-transform:capitalize}.activity-week-day>header strong{font-size:.8rem}.activity-week-day>div{padding:4px;min-height:120px}.activity-week-day>div>p{text-align:center;color:var(--muted);font-size:.7rem}.activity-week-day.is-today>header{background:rgba(78,93,77,.12)}.activity-week .activity-event{display:block;padding:5px;border-radius:7px}.activity-week .activity-date-badge,.activity-week .activity-event small{display:none}.activity-week .activity-event h3{font-size:.64rem}.activity-week .activity-event p{font-size:.58rem}
.activity-month-weekdays,.activity-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.activity-month-weekdays{margin-bottom:3px}.activity-month-weekdays span{text-align:center;font-size:.6rem;font-weight:800;color:var(--muted)}.activity-month-day{position:relative;min-height:76px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.54);padding:5px}.activity-month-day.is-outside{opacity:.42}.activity-month-day.is-today{box-shadow:inset 0 0 0 1px var(--forest)}.activity-day-number{display:block;font-size:.66rem;font-weight:800;margin-bottom:3px}.activity-month-day button{display:block;width:100%;border:0;border-radius:5px;background:rgba(78,93,77,.1);color:var(--ink);padding:3px 4px;margin-top:3px;text-align:left;font:inherit;font-size:.55rem;line-height:1.2;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-month-day small{font-size:.55rem;color:var(--muted)}

/* Bitácora */
.journal-feature-card{display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,1.1fr);overflow:hidden;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.55)}.journal-feature-image{min-height:235px}.journal-feature-image img{width:100%;height:100%;object-fit:cover}.journal-feature-copy{padding:18px}.journal-feature-copy h2{margin:5px 0 4px;font-size:1.35rem;line-height:1.15}.journal-feature-copy>p{font-size:.8rem}.journal-feature-text{color:var(--muted)}
.journal-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.61rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.journal-date{font-size:.68rem!important;color:var(--muted);margin:3px 0 6px!important}
.journal-section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:4px}.journal-section-head h2{margin:0;font-size:1.05rem}.journal-section-head .eyebrow{margin:0 0 1px}.journal-caption{font-size:.67rem;color:var(--muted)}
.journal-recent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.journal-card{display:grid;grid-template-columns:115px 1fr;min-width:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.5)}.journal-card img{width:100%;height:100%;min-height:120px;object-fit:cover}.journal-card>div{padding:10px}.journal-card h3{margin:3px 0;font-size:.83rem;line-height:1.24}.journal-card p:last-child{margin:3px 0 0;font-size:.69rem;color:var(--muted);line-height:1.38}
.journal-archive{border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.44);padding:12px}.journal-carousel-controls{display:flex;align-items:center;gap:6px}.journal-carousel-controls button{width:29px;height:29px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:1rem;cursor:pointer}.journal-carousel-controls span{min-width:38px;text-align:center;font-size:.66rem;color:var(--muted)}.journal-archive-card{margin-top:9px}.journal-archive-card article{display:grid;grid-template-columns:145px 1fr;gap:12px;align-items:center}.journal-archive-card img{width:145px;height:96px;object-fit:cover;border-radius:10px}.journal-archive-card h3{margin:3px 0;font-size:.9rem}.journal-archive-card p:last-child{font-size:.72rem;color:var(--muted);margin:3px 0 0}

@media(max-width:980px){.activity-layout{grid-template-columns:1fr}.activity-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.activity-next-panel,.activity-detail{grid-column:1/-1}.activity-week{grid-template-columns:repeat(4,minmax(0,1fr))}.journal-feature-card{grid-template-columns:1fr 1fr}.journal-recent{grid-template-columns:1fr}}
@media(max-width:680px){.activity-side{grid-template-columns:1fr}.activity-calendar-head{align-items:flex-start;flex-direction:column}.activity-view-tabs{justify-content:flex-start}.activity-calendar-nav{justify-content:flex-start}.activity-week{grid-template-columns:1fr}.activity-week-day>div{min-height:0}.activity-month-day{min-height:62px;padding:3px}.activity-month-day button{font-size:0;width:8px;height:8px;border-radius:50%;padding:0}.activity-month-day button+button{display:inline-block;margin-left:2px}.journal-feature-card{grid-template-columns:1fr}.journal-feature-image{min-height:190px;max-height:230px}.journal-feature-copy{padding:13px}.journal-recent{grid-template-columns:1fr}.journal-card{grid-template-columns:92px 1fr}.journal-archive-card article{grid-template-columns:96px 1fr}.journal-archive-card img{width:96px;height:82px}.journal-caption{display:none}}

/* Ajustes V7 · Talleres y Bitácora */
.activity-more-link{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:.66rem;font-weight:800;color:var(--forest)}
.activity-next-empty,.activity-empty-state{border:1px dashed color-mix(in srgb,var(--forest) 30%,var(--line));border-radius:10px;background:rgba(255,255,255,.44);padding:10px}
.activity-next-empty strong,.activity-empty-state strong{display:block;font-size:.8rem}
.activity-next-empty p,.activity-empty-state span{display:block;margin:3px 0 0;font-size:.69rem;line-height:1.38;color:var(--muted)}
.activity-notice-led{width:10px;height:10px;border-radius:50%;background:#d39428;box-shadow:0 0 0 4px rgba(211,148,40,.13),0 0 10px rgba(211,148,40,.3);flex:0 0 auto}
.activity-notices .activity-mini-list article.is-status{border:1px solid rgba(211,148,40,.28);background:rgba(211,148,40,.07);border-radius:9px;padding:8px}
.activity-notices .activity-mini-list article.is-status strong{display:flex;align-items:center;gap:6px}
.activity-notices .activity-mini-list article.is-status strong::before{content:"";width:7px;height:7px;border-radius:50%;background:#d39428;box-shadow:0 0 0 3px rgba(211,148,40,.13)}
.activity-month-day{min-height:60px;padding:4px}
.activity-day-number{font-size:.62rem;margin-bottom:2px}
.activity-month-day button{font-size:.51rem;padding:2px 3px;margin-top:2px}
.activity-calendar.activity-month{min-height:0}
.journal-empty{border:1px dashed var(--line);border-radius:14px;padding:18px;background:rgba(255,255,255,.44)}
.journal-empty strong{font-size:1rem}.journal-empty p{margin:5px 0 0;color:var(--muted);font-size:.78rem}
@media (prefers-reduced-motion:no-preference){.activity-notice-led{animation:hatarja-notice-pulse 2.8s ease-in-out infinite}}
@keyframes hatarja-notice-pulse{0%,100%{box-shadow:0 0 0 4px rgba(211,148,40,.11),0 0 7px rgba(211,148,40,.18)}50%{box-shadow:0 0 0 5px rgba(211,148,40,.16),0 0 13px rgba(211,148,40,.34)}}
@media(max-width:680px){.activity-month-day{min-height:54px;padding:3px}}


/* =========================================================
   HATARJA V7 — sincronización final Área privada vertical
   Usuario → Contraseña → Entrar en todas las variantes.
   ========================================================= */
body[data-page="area-privada"] .private-locked{width:min(100%,440px)!important}
body[data-page="area-privada"] .private-lock-card{position:relative!important;display:block!important;width:100%!important;padding:14px 56px 13px 14px!important;border-radius:13px!important;box-sizing:border-box!important}
body[data-page="area-privada"] .private-login-grid{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"user" "password" "action" "error"!important;gap:9px!important;width:100%!important;margin:0!important;align-items:stretch!important}
body[data-page="area-privada"] .private-login-grid .private-field:nth-of-type(1){grid-area:user!important}
body[data-page="area-privada"] .private-login-grid .private-field:nth-of-type(2){grid-area:password!important}
body[data-page="area-privada"] .private-field,body[data-page="area-privada"] .private-input-wrap,body[data-page="area-privada"] .private-input-wrap input{width:100%!important;min-width:0!important;box-sizing:border-box!important}
body[data-page="area-privada"] .private-login-button{grid-area:action!important;grid-column:1!important;justify-self:start!important;min-width:124px!important;min-height:33px!important;margin:1px 0 0!important;padding:6px 14px!important}
body[data-page="area-privada"] .private-access-error{grid-area:error!important;grid-column:1!important;margin:0!important}
body[data-page="area-privada"] .private-lock-mark{position:absolute!important;top:13px!important;right:13px!important;width:32px!important;height:32px!important;margin:0!important}
@media(max-width:520px){body[data-page="area-privada"] .private-locked{width:100%!important}body[data-page="area-privada"] .private-lock-card{padding:12px!important}body[data-page="area-privada"] .private-lock-mark{display:none!important}body[data-page="area-privada"] .private-login-button{width:100%!important;justify-self:stretch!important}}


/* ===== V7 · refinamientos visuales 2026-10-07 ===== */
/* Flora: tres columnas también para el catálogo principal, conservando el matiz visual de Fungi. */
.flora-main-grid .catalog-card--kingdom-fungi{grid-column:auto;margin-top:0}
.flora-main-grid .catalog-card--kingdom-fungi::before{display:none}

/* Mapa meteorológico ligero: Leaflet + iconos locales + datos Open-Meteo. */
.env-mini-map-card{grid-template-rows:auto minmax(176px,1fr) auto}
.env-mini-map{position:relative;overflow:hidden}
.env-mini-map.is-fallback iframe{width:100%;height:100%;border:0;background:#edf1ec}
.env-weather-map-note{margin:5px 2px 0;color:var(--muted);font-size:.66rem;line-height:1.28}
.env-map-weather-divicon{background:transparent!important;border:0!important}
.env-map-weather-marker{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:48px;height:34px;padding:3px 5px;border:1px solid color-mix(in srgb,var(--muted) 28%,transparent);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,0,0,.13);white-space:nowrap;backdrop-filter:blur(2px)}
.env-map-weather-marker.is-center{border-color:var(--forest-dark,var(--orange-dark,#555));box-shadow:0 5px 14px rgba(0,0,0,.18)}
.env-map-weather-icon{width:24px;height:24px;object-fit:contain}
.env-map-weather-marker strong{font-size:.70rem;line-height:1;color:var(--ink,var(--graphite,#222))}
.env-mini-map .leaflet-control-attribution{font-size:8px;line-height:1.15}
.env-mini-map .leaflet-popup-content{font-size:.78rem;line-height:1.35;margin:9px 11px}
@supports not (color:color-mix(in srgb,red 10%,white)){.env-map-weather-marker{border-color:rgba(100,100,100,.25)}}
@media(max-width:520px){.env-map-weather-marker{min-width:44px;height:31px;padding:2px 4px}.env-map-weather-icon{width:21px;height:21px}.env-map-weather-marker strong{font-size:.66rem}.env-weather-map-note{font-size:.63rem}}


/* ===== V7 · editor APA manual plegable ===== */
.apa-editor-disclosure {
  padding: 0;
  overflow: hidden;
}
.apa-editor-disclosure > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.apa-editor-disclosure > summary::-webkit-details-marker { display: none; }
.apa-editor-summary-copy { display: grid; gap: 2px; min-width: 0; }
.apa-editor-summary-copy .eyebrow { margin: 0; }
.apa-editor-summary-copy strong { font-size: .94rem; line-height: 1.25; }
.apa-editor-summary-copy small { color: var(--muted); font-size: .67rem; font-weight: 650; }
.apa-editor-chevron {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.64);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 850;
  transition: transform 160ms ease, background-color 160ms ease;
}
.apa-editor-disclosure[open] .apa-editor-chevron { transform: rotate(180deg); }
.apa-editor-disclosure > summary:hover .apa-editor-chevron,
.apa-editor-disclosure > summary:focus-visible .apa-editor-chevron { background: rgba(128,128,128,.08); }
.apa-editor-disclosure > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.apa-editor-body { padding: 12px 14px 14px; border-top: 1px solid var(--line); }
@media (max-width: 520px) {
  .apa-editor-disclosure > summary { padding: 11px 12px; }
  .apa-editor-body { padding: 11px 12px 12px; }
}


/* ===== V7 · ajuste botón Calcular hash ===== */
body[data-page="recursos-hashes"] .hash-calculate {
  justify-self: start;
  min-height: 30px;
  margin-top: 9px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #5d6b5d;
  border-color: #5d6b5d;
  color: #fff;
  font-size: .84rem;
  line-height: 1.15;
}
body[data-page="recursos-hashes"] .hash-calculate:hover:not(:disabled),
body[data-page="recursos-hashes"] .hash-calculate:focus-visible:not(:disabled) {
  background: #718071;
  border-color: #718071;
  color: #fff;
}


/* ===== V7 · mapa meteorológico sin dependencia JS externa ===== */
.env-mini-map { position: relative; overflow: hidden; }
.env-mini-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #edf1ec;
}
.env-weather-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.env-map-weather-marker {
  position: absolute;
  transform: translate(-50%,-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 48px;
  height: 34px;
  padding: 3px 5px;
  border: 1px solid rgba(80,86,80,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  white-space: nowrap;
  backdrop-filter: blur(2px);
}
.env-map-weather-marker.is-center {
  border-width: 2px;
  border-color: var(--forest-dark,var(--orange-dark,#555));
  box-shadow: 0 5px 14px rgba(0,0,0,.20);
  z-index: 2;
}
.env-map-weather-icon { width: 24px; height: 24px; object-fit: contain; }
.env-map-weather-marker strong { font-size: .70rem; line-height: 1; color: var(--ink,var(--graphite,#222)); }
@media (max-width: 520px) {
  .env-map-weather-marker { min-width: 43px; height: 31px; padding: 2px 4px; }
  .env-map-weather-icon { width: 21px; height: 21px; }
  .env-map-weather-marker strong { font-size: .66rem; }
}


/* ===== V7 · ajuste local de meteorología, cabecera de Recursos y fase lunar ===== */
@media (min-width: 861px) {
  body[data-section="recursos"] .page-hero > .container.page-hero-inner {
    grid-template-columns: 218px 28px minmax(0,1fr);
  }
}
.env-metric--moon-visual {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 112px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(115,126,131,.06));
}
.env-moon-visual {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  display: block;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.16));
}
.env-moon-visual-copy { display:grid; gap:3px; min-width:0; }
.env-moon-visual-copy strong { font-size:1.02rem; }
.env-moon-visual-copy span,.env-moon-visual-copy small { color:var(--muted); }
@media (max-width: 520px) {
  .env-metric--moon-visual { grid-column:auto; min-height:104px; }
  .env-moon-visual { width:78px; height:78px; flex-basis:78px; }
}


/* ===== V7 · refinamiento local 2026-10-07 d ===== */
/* Meteorología: cuadrícula más local y marcadores ligeramente más compactos. */
.env-map-weather-marker{min-width:40px;height:29px;padding:2px 4px;gap:1px}
.env-map-weather-icon{width:19px;height:19px}
.env-map-weather-marker strong{font-size:.64rem}
@media(max-width:520px){.env-map-weather-marker{min-width:37px;height:27px;padding:2px 3px}.env-map-weather-icon{width:18px;height:18px}.env-map-weather-marker strong{font-size:.61rem}}

/* Luna: misma información, esfera más contenida y con renderizado de superficie de mayor detalle. */
.env-metric--moon-visual{min-height:94px;gap:10px}
.env-moon-visual{width:70px;height:70px;flex-basis:70px}
.env-moon-visual-copy strong{font-size:.96rem}
@media(max-width:520px){.env-metric--moon-visual{min-height:88px}.env-moon-visual{width:64px;height:64px;flex-basis:64px}}

/* Calculadora científica: ancho y teclas más contenidos en escritorio, manteniendo área táctil cómoda en móvil. */
body[data-page="recursos-calculadora"] .scientific-calculator{width:min(100%,500px);padding:9px;border-radius:13px}
body[data-page="recursos-calculadora"] .calc-screen{margin-bottom:7px;padding:7px 9px 6px}
body[data-page="recursos-calculadora"] .calc-memory-row,body[data-page="recursos-calculadora"] .calc-keypad{gap:4px}
body[data-page="recursos-calculadora"] .calc-memory-row{margin-bottom:4px}
body[data-page="recursos-calculadora"] .calc-button{min-height:32px;padding:4px 3px;font-size:.74rem}
body[data-page="recursos-calculadora"] .calc-button.function{font-size:.68rem}
body[data-page="recursos-calculadora"] .calc-note{width:min(100%,500px);margin-top:7px}
@media(max-width:640px){body[data-page="recursos-calculadora"] .scientific-calculator{width:100%;padding:10px}body[data-page="recursos-calculadora"] .calc-button{min-height:39px}body[data-page="recursos-calculadora"] .calc-note{width:100%}}


/* Hatarja V7 ajuste fino 2026-10-07: meteorología local y luna */
.env-map-weather-marker{min-width:34px;height:24px;padding:1px 3px;gap:1px;border-radius:999px}
.env-map-weather-icon{width:15px;height:15px}
.env-map-weather-marker strong{font-size:.58rem}
@media(max-width:520px){.env-map-weather-marker{min-width:31px;height:22px;padding:1px 3px}.env-map-weather-icon{width:14px;height:14px}.env-map-weather-marker strong{font-size:.56rem}}
.env-moon-visual{width:60px;height:60px;flex-basis:60px;image-rendering:auto}
.env-moon-visual-copy strong{font-size:.94rem}
@media(max-width:520px){.env-metric--moon-visual{min-height:84px}.env-moon-visual{width:56px;height:56px;flex-basis:56px}}


/* ===== V7 · selectores integrados de recursos y meteorología en flujo continuo ===== */
.resource-mode-deck{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.62);padding:10px 11px;display:grid;gap:9px;box-shadow:0 8px 24px rgba(30,35,30,.035)}
.resource-mode-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;padding:1px 2px 0}
.resource-mode-heading>div{display:grid;gap:1px}.resource-mode-kicker{text-transform:uppercase;letter-spacing:.07em;font-size:.66rem;font-weight:850;color:var(--muted)}
.resource-mode-heading strong{font-size:.98rem;line-height:1.2}.resource-mode-heading p{margin:0;max-width:550px;text-align:right;color:var(--muted);font-size:.72rem;line-height:1.35}
.resource-mode-options{margin:0!important;display:grid!important;gap:7px!important;grid-template-columns:repeat(2,minmax(0,1fr))}
.resource-mode-options>button{display:grid;gap:2px;align-content:center;justify-items:start;text-align:left;min-height:52px;border-radius:10px!important;padding:7px 10px!important}
.resource-mode-options>button span{font-size:.84rem;font-weight:850;line-height:1.15}.resource-mode-options>button small{font-size:.66rem;font-weight:600;line-height:1.2;opacity:.72}
.pdf-mode-deck .resource-mode-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.env-flow-intro{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.52);padding:9px 11px;display:grid;grid-template-columns:auto 1fr;gap:1px 10px;align-items:baseline}
.env-flow-intro span{text-transform:uppercase;letter-spacing:.07em;font-size:.64rem;font-weight:850;color:var(--muted)}.env-flow-intro strong{font-size:.88rem}.env-flow-intro p{grid-column:1/-1;margin:3px 0 0;color:var(--muted);font-size:.72rem;line-height:1.4}
.env-tool>.env-panel{margin:0}.env-tool>.env-panel+ .env-panel{margin-top:0}
@media(max-width:720px){.resource-mode-heading{display:grid;gap:4px;align-items:start}.resource-mode-heading p{text-align:left;max-width:none}.resource-mode-options,.pdf-mode-deck .resource-mode-options{grid-template-columns:1fr!important}.resource-mode-options>button{min-height:46px}.env-flow-intro{grid-template-columns:1fr;gap:2px}.env-flow-intro p{grid-column:auto}}


/* ===== V7 · homogeneización Hashes, Metadatos y generador de códigos de barras ===== */
.hash-mode-deck{margin-bottom:0}
.hash-compare-card h2{font-size:1rem;line-height:1.2;font-weight:800}
.meta-data-card h2{font-size:1rem;line-height:1.2;font-weight:800;margin:0 0 8px}
.meta-clean-button{font-size:.79rem!important;line-height:1.2}
.barcode-generator{margin-top:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.62);padding:12px;box-shadow:0 8px 24px rgba(30,35,30,.035)}
.barcode-generator-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:10px}
.barcode-generator-head>div{display:grid;gap:2px}.barcode-generator-head h2{margin:0;font-size:1rem;line-height:1.2}
.barcode-generator-head p{margin:0;max-width:560px;text-align:right;color:var(--muted);font-size:.72rem;line-height:1.4}
.barcode-layout{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(300px,1.2fr);gap:12px;align-items:start}
.barcode-controls{display:grid;gap:9px}.barcode-controls label{display:grid;gap:5px;font-weight:800;font-size:.84rem}
.barcode-controls input,.barcode-controls select{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--white);color:inherit;font:inherit;padding:8px 10px}
.barcode-controls button{justify-self:start;border-radius:9px;padding:7px 11px;font-size:.84rem}
.barcode-status{min-height:1.3em;margin:0;color:var(--muted);font-size:.76rem;line-height:1.4}
.barcode-status[data-tone="error"]{color:#a3261f}.barcode-status[data-tone="ok"]{color:#2e6b37}
.barcode-preview-card{border:1px solid var(--line);border-radius:13px;background:var(--white);padding:10px}
.barcode-preview-stage{min-height:148px;border:1px dashed var(--line);border-radius:10px;background:rgba(128,128,128,.025);display:grid;place-items:center;overflow:auto;padding:10px}
.barcode-preview{width:100%;display:grid;place-items:center}.barcode-preview svg{display:block;max-width:100%;height:auto;max-height:160px}
.barcode-preview-empty{color:var(--muted);font-size:.8rem;text-align:center;padding:24px 12px}
.barcode-downloads{display:flex;justify-content:center;gap:7px;margin-top:8px}.barcode-downloads button{border:1px solid var(--line);border-radius:8px;background:var(--white);color:inherit;padding:6px 10px;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.barcode-downloads button:disabled{opacity:.45;cursor:not-allowed}
.qr-reader-result{border:1px solid var(--line);border-radius:12px;padding:11px;margin-top:12px;background:rgba(255,255,255,.62)}
@media(max-width:720px){.barcode-generator-head{display:grid;gap:4px;align-items:start}.barcode-generator-head p{text-align:left;max-width:none}.barcode-layout{grid-template-columns:1fr}.barcode-controls button{width:100%;justify-self:stretch}.barcode-preview-stage{min-height:132px}}

/* V7 · ajustes de código de barras y exportación bibliográfica */
.barcode-text-toggle{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:7px!important;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:rgba(128,128,128,.035);font-size:.78rem!important;font-weight:750!important;cursor:pointer}
.barcode-text-toggle input{width:auto!important;margin:0;accent-color:var(--forest-dark,var(--orange-dark,#596b52))}
.apa-output-heading .apa-bib-button{background:rgba(86,126,170,.12)}


/* =========================================================
   HATARJA V7 - prototipo de fichas maestras del Vademecum
   ========================================================= */
.vdm-record-shell{max-width:none}.vdm-record{display:grid;gap:14px}.vdm-record-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--white);align-items:stretch}.vdm-record-title{align-self:center}.vdm-record-taxonomy{margin:0 0 5px;color:var(--muted);font-size:.68rem;font-weight:760;letter-spacing:.025em}.vdm-record-title h2{font-size:clamp(1.55rem,2.6vw,2.25rem);margin:0}.vdm-scientific,.vdm-route-place{font-size:1rem;margin:3px 0 9px;color:var(--muted)}.vdm-route-place{font-style:normal;font-weight:680}.vdm-summary{margin:12px 0 0;max-width:72ch;line-height:1.58}.vdm-tags{display:flex;flex-wrap:wrap;gap:5px}.vdm-tags span{padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:rgba(82,105,76,.055);font-size:.63rem;font-weight:760}.vdm-hero-media{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#eef1ea;display:grid;grid-template-rows:minmax(210px,1fr) auto}.vdm-hero-media img{width:100%;height:100%;min-height:210px;max-height:330px;object-fit:cover}.vdm-hero-media figcaption{padding:6px 8px;color:var(--muted);font-size:.58rem;line-height:1.35;background:rgba(255,255,255,.94)}
.vdm-quick-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.vdm-quick-card{min-width:0;display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--line);border-radius:11px;background:var(--white)}.vdm-quick-card img{width:24px;height:24px;object-fit:contain;opacity:.86}.vdm-quick-card div{min-width:0;display:grid;gap:1px}.vdm-quick-card strong{font-size:.78rem;white-space:normal}.vdm-quick-card span{color:var(--muted);font-size:.58rem;line-height:1.25}
.vdm-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vdm-section-card{padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--white)}.vdm-section-card h2{font-size:1rem;margin:0 0 6px}.vdm-section-card p{margin:0;color:var(--ink);font-size:.75rem;line-height:1.58}.vdm-section-heading{margin-bottom:9px}.vdm-section-heading .eyebrow{margin-bottom:2px}.vdm-section-heading h2{margin:0;font-size:1.1rem}.vdm-section-heading p:not(.eyebrow){margin:4px 0 0;color:var(--muted);font-size:.69rem;line-height:1.45}
.vdm-relations,.vdm-sources,.vdm-route-visual{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--white)}.vdm-relation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.vdm-relation-card{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:7px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:10px;color:inherit;text-decoration:none;background:rgba(128,128,128,.018)}.vdm-relation-card:hover{background:rgba(82,105,76,.065)}.vdm-relation-card img{width:26px;height:26px}.vdm-relation-card div{display:grid;gap:2px}.vdm-relation-card strong{font-size:.74rem}.vdm-relation-card span{color:var(--muted);font-size:.61rem}.vdm-relation-card b{font-size:1rem}.vdm-sources ul{margin:0;padding-left:18px}.vdm-sources li{margin:4px 0;font-size:.68rem}.vdm-sources p{margin:8px 0 0;color:var(--muted);font-size:.64rem;line-height:1.45}
.vdm-record-actions{display:flex;flex-wrap:wrap;gap:7px;padding-top:2px}.vdm-action{appearance:none;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);padding:7px 10px;font:inherit;font-size:.68rem;font-weight:780;text-decoration:none;cursor:pointer}.vdm-action:hover{background:rgba(82,105,76,.07)}.vdm-action--primary{background:var(--forest-dark,#435640);border-color:var(--forest-dark,#435640);color:#fff}.vdm-action--primary:hover{background:#344632;color:#fff}
.vdm-map-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.55fr);gap:9px}.vdm-map-frame{position:relative;min-height:310px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#edf1ec}.vdm-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.vdm-map-note{position:absolute;left:8px;bottom:8px;padding:4px 6px;border-radius:7px;background:rgba(255,255,255,.9);font-size:.56rem;color:var(--muted);box-shadow:0 2px 8px rgba(0,0,0,.08)}.vdm-map-side{display:grid;align-content:start;gap:7px}.vdm-map-side article{display:grid;gap:2px;padding:9px;border:1px solid var(--line);border-radius:10px}.vdm-map-side span,.vdm-map-side small{color:var(--muted);font-size:.59rem}.vdm-map-side strong{font-size:.78rem}.vdm-profile{margin-top:9px;padding:9px;border:1px solid var(--line);border-radius:11px;background:rgba(128,128,128,.018)}.vdm-profile-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}.vdm-profile-title strong{font-size:.75rem}.vdm-profile-title span{font-size:.58rem;color:var(--muted)}.vdm-profile svg{display:block;width:100%;max-height:145px}.vdm-profile-axis{stroke:currentColor;opacity:.18}.vdm-profile-line{fill:none;stroke:#61785b;stroke-width:3;stroke-linejoin:round}.vdm-profile-fill{fill:#8ba284;opacity:.13}.vdm-profile-label{font-size:10px;fill:currentColor;opacity:.55}
@media(max-width:980px){.vdm-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.vdm-record-head{grid-template-columns:1fr}.vdm-hero-media img{max-height:300px}.vdm-map-grid{grid-template-columns:1fr}.vdm-map-side{grid-template-columns:1fr 1fr}.vdm-map-side .vdm-action{grid-column:1/-1;text-align:center}}
@media(max-width:620px){.vdm-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vdm-content-grid,.vdm-relation-grid{grid-template-columns:1fr}.vdm-record-head,.vdm-section-card,.vdm-relations,.vdm-sources,.vdm-route-visual{padding:10px}.vdm-hero-media{grid-template-rows:minmax(180px,1fr) auto}.vdm-hero-media img{min-height:180px}.vdm-map-frame{min-height:260px}.vdm-map-side{grid-template-columns:1fr}.vdm-profile-title{display:grid}.vdm-record-actions{display:grid}.vdm-record-actions .vdm-action{text-align:center}}
@media print{body.vdm-record-page{background:#fff}.vdm-record-page #site-header,.vdm-record-page #site-footer,.vdm-record-page .section-subnav,.vdm-record-page .breadcrumbs,.vdm-record-page .vdm-record-actions,.vdm-record-page .page-hero{display:none!important}.vdm-record-page .section,.vdm-record-page .page-content,.vdm-record-page .container,.vdm-record-page .section-layout,.vdm-record-page .content-shell{display:block!important;max-width:none!important;width:auto!important;margin:0!important;padding:0!important}.vdm-record{gap:7mm}.vdm-record-head{grid-template-columns:1.2fr .8fr;padding:5mm;border-radius:3mm;break-inside:avoid}.vdm-hero-media img{min-height:42mm;max-height:58mm}.vdm-quick-grid{grid-template-columns:repeat(3,1fr);gap:2mm}.vdm-quick-card{padding:2.5mm;break-inside:avoid}.vdm-content-grid{grid-template-columns:1fr 1fr;gap:3mm}.vdm-section-card{padding:4mm;break-inside:avoid}.vdm-relations,.vdm-sources,.vdm-route-visual{padding:4mm;break-inside:avoid}.vdm-map-frame{min-height:62mm}.vdm-map-frame iframe{display:none}.vdm-map-frame:before{content:'Mapa interactivo disponible en la ficha web';display:grid;place-items:center;height:62mm;color:#687468;font-size:9pt;background:#eef1ea}.vdm-map-note{display:none}.vdm-profile svg{height:30mm}@page{size:A4;margin:12mm}}


/* =========================================================
   HATARJA V8 - Vademecum: ficha sintetica, iconografica y A4
   ========================================================= */
.vdm-record{gap:12px}
.vdm-record-head{grid-template-columns:minmax(0,.88fr) minmax(340px,1.12fr);gap:13px}
.vdm-hero-media{grid-template-rows:minmax(250px,1fr) auto}
.vdm-hero-media img{min-height:250px;max-height:390px}
.vdm-summary{font-size:.82rem;line-height:1.48}
.vdm-section-card p{font-size:.71rem;line-height:1.48}
.vdm-section-card h2{display:flex;align-items:center;gap:7px;font-size:.96rem}
.vdm-section-card h2::before{content:"";width:18px;height:18px;flex:0 0 18px;background-position:center;background-repeat:no-repeat;background-size:contain;opacity:.78}
.vdm-record--fauna .vdm-section-card h2::before{background-image:url('../assets/icons/fauna/fauna.svg')}
.vdm-record--flora .vdm-section-card h2::before{background-image:url('../assets/icons/flora/flora.svg')}
.vdm-record--senderismo .vdm-section-card h2::before{background-image:url('../assets/icons/senderismo/senderismo.svg')}
.vdm-quick-card img{width:26px;height:26px}
.vdm-quick-card strong{font-size:.76rem}.vdm-quick-card span{font-size:.56rem}
@media(max-width:980px){.vdm-record-head{grid-template-columns:1fr}.vdm-hero-media img{min-height:230px;max-height:340px}}
@media(max-width:620px){.vdm-hero-media{grid-template-rows:minmax(210px,1fr) auto}.vdm-hero-media img{min-height:210px}.vdm-summary{font-size:.78rem}}

@media print{
  .vdm-record-page{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .vdm-record{gap:1.6mm!important;font-size:7.4pt}
  .vdm-record-head{grid-template-columns:.86fr 1.14fr!important;gap:2.4mm!important;padding:2.6mm!important;border-radius:2mm!important}
  .vdm-record-title h2{font-size:17pt!important;line-height:1.05!important}.vdm-record-taxonomy{font-size:5.7pt!important}.vdm-scientific,.vdm-route-place{font-size:8.4pt!important;margin:1mm 0!important}
  .vdm-tags{gap:1mm!important}.vdm-tags span{padding:.6mm 1.4mm!important;font-size:5.4pt!important}.vdm-summary{font-size:6.8pt!important;line-height:1.28!important;margin:1.8mm 0 0!important}
  .vdm-hero-media{grid-template-rows:42mm auto!important;border-radius:2mm!important}.vdm-hero-media img{min-height:42mm!important;max-height:42mm!important}.vdm-hero-media figcaption{font-size:4.8pt!important;padding:1mm 1.5mm!important}
  .vdm-quick-grid{grid-template-columns:repeat(6,1fr)!important;gap:1.2mm!important}.vdm-quick-card{gap:1mm!important;padding:1.3mm!important;border-radius:1.5mm!important}.vdm-quick-card img{width:4.5mm!important;height:4.5mm!important}.vdm-quick-card strong{font-size:6.2pt!important;line-height:1.08!important}.vdm-quick-card span{font-size:4.7pt!important;line-height:1.08!important}
  .vdm-content-grid{grid-template-columns:repeat(3,1fr)!important;gap:1.4mm!important}.vdm-section-card{padding:2mm!important;border-radius:1.7mm!important}.vdm-section-card h2{font-size:7pt!important;margin:0 0 .8mm!important;gap:1mm!important}.vdm-section-card h2::before{width:3.4mm!important;height:3.4mm!important;flex-basis:3.4mm!important}.vdm-section-card p{font-size:5.75pt!important;line-height:1.24!important}
  .vdm-relations,.vdm-sources,.vdm-route-visual{padding:2mm!important;border-radius:1.7mm!important}.vdm-section-heading{margin-bottom:1mm!important}.vdm-section-heading .eyebrow{font-size:4.8pt!important}.vdm-section-heading h2{font-size:7.2pt!important}.vdm-section-heading p:not(.eyebrow){display:none!important}
  .vdm-relation-grid{grid-template-columns:repeat(2,1fr)!important;gap:1mm!important}.vdm-relation-card{grid-template-columns:4mm 1fr auto!important;padding:1.2mm!important;gap:1mm!important}.vdm-relation-card img{width:3.8mm!important;height:3.8mm!important}.vdm-relation-card strong{font-size:5.8pt!important}.vdm-relation-card span{font-size:4.6pt!important}.vdm-relation-card b{font-size:7pt!important}
  .vdm-sources ul{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.4mm 3mm!important;padding-left:3mm!important}.vdm-sources li{font-size:4.8pt!important;line-height:1.16!important;margin:0!important}.vdm-sources p{display:none!important}
  .vdm-route-visual{display:grid!important;grid-template-columns:1.15fr .85fr!important;gap:1.4mm!important}.vdm-route-visual>.vdm-section-heading{grid-column:1/-1!important}.vdm-map-grid{display:block!important}.vdm-map-side{display:none!important}.vdm-map-frame{min-height:31mm!important;height:31mm!important}.vdm-map-frame:before{height:31mm!important;font-size:6pt!important}.vdm-profile{margin:0!important;padding:1.5mm!important}.vdm-profile-title{display:grid!important;gap:.4mm!important;margin-bottom:.6mm!important}.vdm-profile-title strong{font-size:5.8pt!important}.vdm-profile-title span{font-size:4.6pt!important}.vdm-profile svg{height:26mm!important;max-height:26mm!important}.vdm-profile-label{font-size:8px!important}
  @page{size:A4;margin:8mm}
}

/* =========================================================
   HATARJA V8.1 - Fichas Vademécum con iconografía y galería propia
   ========================================================= */
.vdm-icon-guide,.vdm-gallery,.vdm-relations,.vdm-sources,.vdm-route-visual{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.vdm-icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vdm-icon-card{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start;padding:9px;border:1px solid var(--line);border-radius:12px;background:rgba(128,128,128,.018)}
.vdm-icon-card img{width:24px;height:24px;object-fit:contain;margin-top:2px}.vdm-icon-card strong{display:block;font-size:.78rem;line-height:1.2}.vdm-icon-card p{margin:2px 0 0;color:var(--muted);font-size:.62rem;line-height:1.32}
.vdm-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vdm-gallery-card{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f3f3ef;display:grid;grid-template-rows:minmax(130px,1fr) auto}.vdm-gallery-card img{width:100%;height:100%;min-height:130px;max-height:190px;object-fit:cover}.vdm-gallery-card figcaption{padding:6px 8px;font-size:.6rem;line-height:1.3;color:var(--muted);background:rgba(255,255,255,.92)}
.vdm-route-visual-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:10px;align-items:start}
.vdm-route-visual-grid .vdm-map-grid{grid-template-columns:minmax(0,1fr) 220px}.vdm-route-visual-grid .vdm-map-frame{min-height:280px}.vdm-route-visual-grid .vdm-profile{margin-top:0;height:100%}
@media(max-width:980px){.vdm-icon-grid,.vdm-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vdm-route-visual-grid{grid-template-columns:1fr}.vdm-route-visual-grid .vdm-map-grid{grid-template-columns:1fr}}
@media(max-width:620px){.vdm-icon-grid,.vdm-gallery-grid,.vdm-content-grid,.vdm-relation-grid{grid-template-columns:1fr}.vdm-icon-guide,.vdm-gallery,.vdm-relations,.vdm-sources,.vdm-route-visual{padding:10px}.vdm-gallery-card img{max-height:220px}}
@media print{
  .vdm-record-page{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .vdm-record{gap:1.4mm!important;font-size:7.1pt}
  .vdm-record-head{grid-template-columns:.88fr 1.12fr!important;gap:2mm!important;padding:2.4mm!important;border-radius:2mm!important}
  .vdm-record-title h2{font-size:16.2pt!important;line-height:1.03!important}.vdm-record-taxonomy{font-size:5.6pt!important}.vdm-scientific,.vdm-route-place{font-size:8pt!important;margin:.8mm 0!important}
  .vdm-tags{gap:.8mm!important}.vdm-tags span{padding:.5mm 1.2mm!important;font-size:5.2pt!important}.vdm-summary{font-size:6.35pt!important;line-height:1.22!important;margin:1.4mm 0 0!important}
  .vdm-hero-media{grid-template-rows:34mm auto!important;border-radius:2mm!important}.vdm-hero-media img{min-height:34mm!important;max-height:34mm!important}.vdm-hero-media figcaption{font-size:4.7pt!important;padding:.8mm 1.1mm!important}
  .vdm-quick-grid{grid-template-columns:repeat(6,1fr)!important;gap:1mm!important}.vdm-quick-card{gap:1mm!important;padding:1.15mm!important;border-radius:1.4mm!important}.vdm-quick-card img{width:4.2mm!important;height:4.2mm!important}.vdm-quick-card strong{font-size:5.9pt!important;line-height:1.05!important}.vdm-quick-card span{font-size:4.6pt!important;line-height:1.08!important}
  .vdm-icon-guide,.vdm-gallery,.vdm-relations,.vdm-sources,.vdm-route-visual{padding:1.8mm!important;border-radius:1.7mm!important}
  .vdm-section-heading{margin-bottom:.8mm!important}.vdm-section-heading .eyebrow{font-size:4.7pt!important;margin:0!important}.vdm-section-heading h2{font-size:7pt!important;line-height:1.1!important;margin:0!important}.vdm-section-heading p:not(.eyebrow){font-size:4.9pt!important;line-height:1.1!important;margin:.5mm 0 0!important}
  .vdm-icon-grid{grid-template-columns:repeat(3,1fr)!important;gap:.9mm!important}.vdm-icon-card{grid-template-columns:4mm 1fr!important;gap:.9mm!important;padding:1.1mm!important;border-radius:1.4mm!important}.vdm-icon-card img{width:3.7mm!important;height:3.7mm!important}.vdm-icon-card strong{font-size:5.8pt!important}.vdm-icon-card p{font-size:4.55pt!important;line-height:1.12!important;margin:.25mm 0 0!important}
  .vdm-gallery-grid{grid-template-columns:repeat(3,1fr)!important;gap:.9mm!important}.vdm-gallery-card{border-radius:1.4mm!important}.vdm-gallery-card img{min-height:20mm!important;max-height:20mm!important}.vdm-gallery-card figcaption{font-size:4.45pt!important;line-height:1.1!important;padding:.8mm 1mm!important}
  .vdm-route-visual-grid{grid-template-columns:1.12fr .88fr!important;gap:1mm!important}.vdm-route-visual-grid .vdm-map-grid{grid-template-columns:1fr!important}.vdm-route-visual-grid .vdm-map-side{display:none!important}.vdm-map-frame{min-height:29mm!important;height:29mm!important;border-radius:1.6mm!important}.vdm-map-frame iframe{display:none!important}.vdm-map-frame:before{content:'Mapa interactivo disponible en la ficha web';display:grid;place-items:center;height:29mm;color:#687468;font-size:6pt;background:#eef1ea}.vdm-map-note{display:none!important}.vdm-profile{padding:1.2mm!important;border-radius:1.4mm!important}.vdm-profile-title{display:grid!important;gap:.35mm!important;margin-bottom:.5mm!important}.vdm-profile-title strong{font-size:5.6pt!important}.vdm-profile-title span{font-size:4.5pt!important}.vdm-profile svg{height:24mm!important;max-height:24mm!important}
  .vdm-content-grid{grid-template-columns:repeat(2,1fr)!important;gap:1mm!important}.vdm-section-card{padding:1.8mm!important;border-radius:1.5mm!important}.vdm-section-card h2{font-size:6.5pt!important;margin:0 0 .45mm!important;gap:.8mm!important}.vdm-section-card h2::before{width:3.3mm!important;height:3.3mm!important;flex-basis:3.3mm!important}.vdm-section-card p{font-size:4.9pt!important;line-height:1.16!important}
  .vdm-relation-grid{grid-template-columns:repeat(2,1fr)!important;gap:.8mm!important}.vdm-relation-card{grid-template-columns:4mm 1fr auto!important;padding:1.1mm!important;gap:.8mm!important}.vdm-relation-card img{width:3.4mm!important;height:3.4mm!important}.vdm-relation-card strong{font-size:5.4pt!important}.vdm-relation-card span{font-size:4.4pt!important;line-height:1.1!important}.vdm-relation-card b{font-size:6pt!important}
  .vdm-sources ul{margin:0!important;padding-left:3mm!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:.25mm 2mm!important}.vdm-sources li{font-size:4.45pt!important;line-height:1.14!important;margin:0!important}.vdm-sources p{font-size:4.55pt!important;line-height:1.1!important;margin:.7mm 0 0!important}
  @page{size:A4;margin:7mm}
}
@media print{
  .vdm-route-visual{display:block!important}
  .vdm-route-visual>.vdm-section-heading{display:block!important;margin-bottom:.8mm!important}
  .vdm-route-visual-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1.2mm!important;align-items:start!important}
  .vdm-route-visual-grid .vdm-map-grid{display:block!important}
  .vdm-route-visual-grid .vdm-map-frame{min-height:24mm!important;height:24mm!important}
  .vdm-route-visual-grid .vdm-profile{margin:0!important;height:auto!important;min-height:24mm!important}
  .vdm-route-visual-grid .vdm-profile svg{height:20mm!important;max-height:20mm!important}
}


/* V8 watermark record */
.vdm-record{position:relative;isolation:isolate;overflow:hidden}
.vdm-record::before{content:'';position:absolute;inset:0;background-image:url('../assets/images/logo-hatarja-watermark-grey.png');background-repeat:no-repeat;background-position:center 28px;background-size:min(42%,320px);opacity:.085;pointer-events:none;z-index:0;filter:grayscale(1);}
.vdm-record>*{position:relative;z-index:1}
@media print{.vdm-record::before{background-position:center 18mm;background-size:78mm auto;opacity:.06}}

/* =========================================================
   HATARJA V8 — ajuste final de fichas: iconos integrados y marca de agua
   ========================================================= */
.vdm-record::before{display:none!important}
.vdm-section-card h2::before{display:none!important}
.vdm-section-card h2{display:flex;align-items:center;gap:8px}
.vdm-section-icon{width:22px;height:22px;flex:0 0 22px;object-fit:contain}
.hatarja-watermark-layer{
  position:fixed;
  left:50%;
  top:54%;
  width:min(40vw,380px);
  aspect-ratio:1.14/1;
  transform:translate(-50%,-50%);
  background:url('../assets/images/hatarja-watermark-grey-transparent.png') center/contain no-repeat;
  opacity:.12;
  pointer-events:none;
  z-index:60;
}
.vdm-record-page .vdm-record,.vdm-record-page .page-hero,.vdm-record-page #site-header,.vdm-record-page #site-footer{position:relative;z-index:1}
@media(max-width:700px){.hatarja-watermark-layer{width:min(62vw,320px);opacity:.09}}
@media print{
  .hatarja-watermark-layer{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    width:92mm!important;
    height:81mm!important;
    transform:translate(-50%,-50%)!important;
    background:url('../assets/images/hatarja-watermark-grey-transparent.png') center/contain no-repeat!important;
    opacity:.15!important;
    z-index:999!important;
    display:block!important;
  }
  .vdm-section-icon{width:3.8mm!important;height:3.8mm!important;flex-basis:3.8mm!important}
}


/* =========================================================
   Hatarja V8.2 — fases lunares con imágenes propias + ajuste A4
   ========================================================= */
.env-metric--moon-visual{grid-column:span 2;display:flex;align-items:center;gap:12px;min-height:116px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(95,108,117,.06))}
.env-moon-visual{width:84px;height:84px;flex:0 0 84px;display:block;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.16))}
.env-moon-visual-copy{display:grid;gap:3px;min-width:0}.env-moon-visual-copy strong{font-size:1.03rem}.env-moon-visual-copy span,.env-moon-visual-copy small{color:var(--muted)}
.env-metric--moon-cycle{grid-column:1/-1;display:grid;gap:10px;min-height:auto}
.env-moon-cycle-head{display:grid;gap:2px}.env-moon-cycle-head strong{font-size:.96rem}.env-moon-cycle-head span{font-size:.74rem;color:var(--muted)}
.env-moon-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.env-moon-day{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:8px 8px;border:1px solid var(--line);border-radius:11px;background:rgba(128,128,128,.03);text-align:left;min-height:62px}
.env-moon-day-icon{width:40px;height:40px;object-fit:contain;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.12))}
.env-moon-day-meta{display:grid;align-content:center;gap:2px;min-width:0}.env-moon-day strong{font-size:.72rem;line-height:1.1}.env-moon-day small,.env-moon-day span{font-size:.66rem;line-height:1.12;color:var(--muted)}
@media(max-width:860px){.env-moon-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.env-metric--moon-visual{grid-column:auto;min-height:100px}.env-moon-visual{width:74px;height:74px;flex-basis:74px}.env-moon-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.env-moon-day{padding:7px}}
@media(max-width:420px){.env-moon-strip{grid-template-columns:1fr}.env-moon-day-icon{width:34px;height:34px}}

@media print{
  .vdm-record-page{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .vdm-record{gap:2mm!important;font-size:7.9pt!important}
  .vdm-record-head{grid-template-columns:.88fr 1.12fr!important;gap:2.8mm!important;padding:3mm!important;border-radius:2.4mm!important}
  .vdm-record-title h2{font-size:18pt!important;line-height:1.03!important}
  .vdm-record-taxonomy{font-size:6pt!important}.vdm-scientific,.vdm-route-place{font-size:8.8pt!important;margin:1mm 0!important}
  .vdm-tags span{font-size:5.7pt!important;padding:.7mm 1.5mm!important}.vdm-summary{font-size:7pt!important;line-height:1.28!important;margin:2mm 0 0!important}
  .vdm-hero-media{grid-template-rows:46mm auto!important;border-radius:2.1mm!important}.vdm-hero-media img{min-height:46mm!important;max-height:46mm!important}.vdm-hero-media figcaption{font-size:5pt!important;padding:1mm 1.4mm!important}
  .vdm-quick-grid{grid-template-columns:repeat(6,1fr)!important;gap:1.3mm!important}.vdm-quick-card{padding:1.5mm!important;gap:1.1mm!important}.vdm-quick-card img{width:4.8mm!important;height:4.8mm!important}.vdm-quick-card strong{font-size:6.5pt!important}.vdm-quick-card span{font-size:5pt!important}
  .vdm-gallery,.vdm-route-visual,.vdm-relations,.vdm-sources{padding:2.1mm!important;border-radius:1.8mm!important}
  .vdm-gallery-grid{gap:1.2mm!important}.vdm-gallery-card img{min-height:24mm!important;max-height:24mm!important}.vdm-gallery-card figcaption{font-size:4.7pt!important;line-height:1.15!important;padding:.9mm 1.1mm!important}
  .vdm-route-visual-grid{grid-template-columns:1.08fr .92fr!important;gap:1.4mm!important}.vdm-route-visual-grid .vdm-map-grid{grid-template-columns:1fr!important}.vdm-route-visual-grid .vdm-map-side{display:none!important}.vdm-map-frame{min-height:35mm!important;height:35mm!important}.vdm-map-frame:before{height:35mm!important;font-size:6.2pt!important}.vdm-profile{padding:1.4mm!important}.vdm-profile svg{height:28mm!important;max-height:28mm!important}
  .vdm-content-grid{grid-template-columns:repeat(2,1fr)!important;gap:1.3mm!important}.vdm-section-card{padding:2.2mm!important;border-radius:1.7mm!important}.vdm-section-card h2{font-size:7pt!important;margin:0 0 .8mm!important}.vdm-section-card p{font-size:5.45pt!important;line-height:1.2!important}
  .vdm-relation-grid{grid-template-columns:repeat(2,1fr)!important;gap:1mm!important}.vdm-relation-card{padding:1.3mm!important}.vdm-sources ul{gap:.4mm 2.2mm!important}.vdm-sources li{font-size:4.9pt!important;line-height:1.16!important}.vdm-sources p{font-size:4.9pt!important;line-height:1.14!important}
  .vdm-record--fauna .vdm-hero-media,.vdm-record--flora .vdm-hero-media{grid-template-rows:48mm auto!important}.vdm-record--fauna .vdm-hero-media img,.vdm-record--flora .vdm-hero-media img{min-height:48mm!important;max-height:48mm!important}
  .vdm-record--fauna .vdm-gallery-card img,.vdm-record--flora .vdm-gallery-card img{min-height:28mm!important;max-height:28mm!important}
  .vdm-record--fauna .vdm-section-card p,.vdm-record--flora .vdm-section-card p{font-size:5.6pt!important;line-height:1.22!important}
  .vdm-record--senderismo .vdm-gallery-card img{min-height:22mm!important;max-height:22mm!important}.vdm-record--senderismo .vdm-hero-media{grid-template-rows:42mm auto!important}.vdm-record--senderismo .vdm-hero-media img{min-height:42mm!important;max-height:42mm!important}.vdm-record--senderismo .vdm-map-frame{min-height:36mm!important;height:36mm!important}.vdm-record--senderismo .vdm-profile svg{height:26mm!important;max-height:26mm!important}
  @page{size:A4;margin:5.5mm}
}


/* Hatarja V8.2 — ajuste final de altura útil en PDF */
@media print{
  .vdm-record{display:flex!important;flex-direction:column!important;min-height:284mm!important}
  .vdm-record>.vdm-sources{margin-top:auto!important}
}

.vdm-action.is-disabled,.study-entry-actions .is-disabled,.study-toc-actions .is-disabled,.study-actions .is-disabled{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border:1px dashed var(--line);border-radius:9px;background:rgba(128,128,128,.06);color:var(--muted);font-size:.68rem;font-weight:760;text-decoration:none;cursor:not-allowed}.access-notice,.pro-access-notice{margin-top:8px;padding:10px 12px;border:1px dashed rgba(255,100,28,.35);border-radius:12px;background:rgba(255,100,28,.05);color:var(--ink);font-size:.72rem;line-height:1.45}.access-notice strong,.pro-access-notice strong{display:block;margin-bottom:2px;color:var(--orange-dark)}

.vdm-hold-panel{max-width:760px;margin:0 auto;padding:30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(82,105,76,.055),rgba(255,255,255,.8));text-align:center}.vdm-hold-panel img{width:56px;height:56px;object-fit:contain;margin:0 auto 10px}.vdm-hold-panel h2{margin:0 0 8px;font-size:1.35rem}.vdm-hold-panel p{margin:0 auto 14px;max-width:620px;color:var(--muted);line-height:1.55}.vdm-hold-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.vdm-hold-actions a{padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;text-decoration:none;font-size:.72rem;font-weight:800}.vdm-hold-status{display:inline-flex;margin-bottom:10px;padding:5px 9px;border-radius:999px;background:rgba(82,105,76,.1);font-size:.65rem;font-weight:850;letter-spacing:.02em}

/* V8.11 — aviso visual de imágenes representativas + miniaturas de fichas */
.catalog-thumb--species{margin:9px 0 8px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:rgba(128,128,128,.03)}
.catalog-thumb--species img{width:100%;height:118px;display:block;object-fit:cover}
.vdm-image-disclaimer{border-color:rgba(196,142,26,.38)!important;background:rgba(242,197,83,.11)!important;box-shadow:inset 3px 0 0 rgba(196,142,26,.55)}
.vdm-image-disclaimer strong{font-weight:900}
@media(max-width:620px){.catalog-thumb--species img{height:150px}}


/* =========================================================
   Hatarja V8 · entrega 12 — mapa meteorológico e impresión A4
   ========================================================= */
.env-mini-map-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.env-mini-map-actions button{appearance:none;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);padding:5px 8px;font:inherit;font-size:.70rem;font-weight:800;cursor:pointer}.env-mini-map-actions button:hover,.env-mini-map-actions button:focus-visible{background:rgba(128,128,128,.06)}
@media(max-width:520px){.env-mini-map-head{align-items:flex-start}.env-mini-map-actions{gap:5px}.env-mini-map-actions button,.env-mini-map-actions a{font-size:.67rem}}

@media print{
  @page{size:A4 landscape;margin:5mm}
  body[data-page="recursos-meteo-astro"]{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff!important}
  body[data-page="recursos-meteo-astro"] #site-header,body[data-page="recursos-meteo-astro"] #site-footer,body[data-page="recursos-meteo-astro"] .page-hero,body[data-page="recursos-meteo-astro"] .section-subnav,body[data-page="recursos-meteo-astro"] .resource-family-back,body[data-page="recursos-meteo-astro"] .env-location-controls,body[data-page="recursos-meteo-astro"] .env-location-head button,body[data-page="recursos-meteo-astro"] .env-mini-map-actions,body[data-page="recursos-meteo-astro"] .env-panel-head button,body[data-page="recursos-meteo-astro"] .env-date-row label,body[data-page="recursos-meteo-astro"] .env-chart-grid,body[data-page="recursos-meteo-astro"] .env-panel-solar .env-solar-form,body[data-page="recursos-meteo-astro"] #env-panel-solar{display:none!important}
  body[data-page="recursos-meteo-astro"] .section,body[data-page="recursos-meteo-astro"] .page-content,body[data-page="recursos-meteo-astro"] .container,body[data-page="recursos-meteo-astro"] .section-layout,body[data-page="recursos-meteo-astro"] .content-shell{display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
  body[data-page="recursos-meteo-astro"] .env-tool{display:grid!important;grid-template-columns:1fr 1fr!important;gap:2mm!important;font-size:6.8pt!important;line-height:1.18!important}
  body[data-page="recursos-meteo-astro"] .env-overview-grid,body[data-page="recursos-meteo-astro"] #env-panel-current,body[data-page="recursos-meteo-astro"] #env-panel-forecast,body[data-page="recursos-meteo-astro"] .env-attribution{grid-column:1/-1!important}
  body[data-page="recursos-meteo-astro"] .env-overview-grid{display:grid!important;grid-template-columns:.92fr 1.08fr!important;gap:2mm!important}
  body[data-page="recursos-meteo-astro"] .env-location-card,body[data-page="recursos-meteo-astro"] .env-mini-map-card,body[data-page="recursos-meteo-astro"] .env-panel{padding:2mm!important;border-radius:2mm!important;box-shadow:none!important;margin:0!important}
  body[data-page="recursos-meteo-astro"] .env-location-head h2,body[data-page="recursos-meteo-astro"] .env-mini-map-head h2,body[data-page="recursos-meteo-astro"] .env-panel h2{font-size:8pt!important;line-height:1.1!important;margin:0 0 1mm!important}
  body[data-page="recursos-meteo-astro"] .env-location-head p{display:none!important}
  body[data-page="recursos-meteo-astro"] .env-location-summary{display:grid!important;gap:.4mm!important;padding:1.3mm!important}.env-location-summary strong{font-size:7pt!important}.env-location-summary span,.env-status{font-size:5.5pt!important;line-height:1.15!important;margin:.7mm 0 0!important}
  body[data-page="recursos-meteo-astro"] .env-mini-map{height:34mm!important;min-height:34mm!important}.env-weather-map-note{font-size:5pt!important;margin:.7mm 0 0!important}
  body[data-page="recursos-meteo-astro"] .env-map-weather-marker{min-width:8mm!important;height:5.7mm!important;padding:.3mm .7mm!important}.env-map-weather-icon{width:3.7mm!important;height:3.7mm!important}.env-map-weather-marker strong{font-size:5.4pt!important}
  body[data-page="recursos-meteo-astro"] .env-metric-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1mm!important}.env-metric{padding:1.2mm!important;min-height:0!important;border-radius:1.5mm!important}.env-metric strong{font-size:6.2pt!important}.env-metric span,.env-metric small{font-size:4.8pt!important;line-height:1.08!important}
  body[data-page="recursos-meteo-astro"] #env-panel-forecast .env-forecast-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:1mm!important;margin-top:0!important}.env-forecast-day{padding:1.1mm!important;border-radius:1.5mm!important;min-height:0!important;gap:.25mm!important}.env-forecast-day strong{font-size:5.4pt!important}.env-forecast-day b{font-size:5.5pt!important}.env-forecast-day span,.env-forecast-day small{font-size:4.4pt!important;line-height:1.06!important}.env-weather-icon--forecast{width:6mm!important;height:6mm!important;margin:0!important}
  body[data-page="recursos-meteo-astro"] #env-panel-sun,body[data-page="recursos-meteo-astro"] #env-panel-moon{min-height:0!important}.env-note{font-size:4.7pt!important;line-height:1.1!important;margin:1mm 0 0!important}
  body[data-page="recursos-meteo-astro"] #env-panel-moon .env-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.env-metric--moon-visual{grid-column:span 1!important;min-height:0!important;gap:1mm!important}.env-moon-visual{width:10mm!important;height:10mm!important;flex:0 0 10mm!important}.env-moon-visual-copy strong{font-size:6pt!important}.env-moon-visual-copy span,.env-moon-visual-copy small{font-size:4.5pt!important}.env-metric--moon-cycle{grid-column:1/-1!important;padding:1mm!important}.env-moon-cycle-head{display:none!important}.env-moon-strip{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:.7mm!important}.env-moon-day{grid-template-columns:5mm 1fr!important;gap:.7mm!important;padding:.7mm!important;min-height:0!important}.env-moon-day:nth-child(n+6){display:none!important}.env-moon-day-icon{width:5mm!important;height:5mm!important}.env-moon-day strong{font-size:4.7pt!important}.env-moon-day small,.env-moon-day span{font-size:4.1pt!important}
  body[data-page="recursos-meteo-astro"] .env-attribution{font-size:4.6pt!important;line-height:1.1!important;margin:0!important;padding-top:.5mm!important}
}


/* =========================================================
   Hatarja V8 · entrega 13 — impresión PDF con mapa OSM estático
   ========================================================= */
.env-location-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.env-location-actions button{appearance:none;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);padding:5px 8px;font:inherit;font-size:.70rem;font-weight:800;cursor:pointer}.env-location-actions button:hover,.env-location-actions button:focus-visible{background:rgba(128,128,128,.06)}.env-location-actions button:disabled{opacity:.62;cursor:wait}
.env-print-map-snapshot{display:none;position:absolute;inset:0;overflow:hidden;background:#e8eee7}.env-print-map-tile{position:absolute;display:block;max-width:none!important;object-fit:fill}.env-print-map-marker{position:absolute;transform:translate(-50%,-50%);z-index:4;display:flex;align-items:center;gap:2px;padding:2px 4px;border:1px solid rgba(76,83,72,.30);border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 1px 5px rgba(0,0,0,.18);white-space:nowrap}.env-print-map-marker.is-center{border-color:rgba(82,105,76,.64);box-shadow:0 0 0 2px rgba(82,105,76,.16),0 1px 5px rgba(0,0,0,.18)}.env-print-map-icon{width:18px;height:18px;object-fit:contain}.env-print-map-marker strong{font-size:.62rem;line-height:1}.env-print-map-center{position:absolute;z-index:5;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#d84d42;box-shadow:0 1px 5px rgba(0,0,0,.35);transform:translate(-50%,-50%)}.env-print-map-attribution{position:absolute;z-index:6;right:3px;bottom:2px;padding:1px 3px;border-radius:3px;background:rgba(255,255,255,.82);color:#4f554e;font-size:8px;line-height:1.2}
@media(max-width:520px){.env-location-head{align-items:flex-start}.env-location-actions{gap:5px}.env-location-actions button{font-size:.67rem;padding:5px 7px}}
@media print{
  body[data-page="recursos-meteo-astro"] .env-mini-map iframe{display:none!important}
  body[data-page="recursos-meteo-astro"] .env-print-map-snapshot{display:block!important}
  body[data-page="recursos-meteo-astro"] .env-weather-overlay{display:none!important}
  body[data-page="recursos-meteo-astro"] .env-print-map-marker{padding:.25mm .55mm!important;gap:.35mm!important;border-width:.2mm!important;box-shadow:none!important}
  body[data-page="recursos-meteo-astro"] .env-print-map-icon{width:3.8mm!important;height:3.8mm!important}
  body[data-page="recursos-meteo-astro"] .env-print-map-marker strong{font-size:4.8pt!important}
  body[data-page="recursos-meteo-astro"] .env-print-map-center{width:2.4mm!important;height:2.4mm!important;border-width:.5mm!important;box-shadow:none!important}
  body[data-page="recursos-meteo-astro"] .env-print-map-attribution{font-size:4.3pt!important}
}

:root{--graph-accent:#45684a;--graph-accent-soft:rgba(69,104,74,.075)}


/* =========================================================
   Hatarja V8 · Calculadora gráfica local
   ========================================================= */
.graph-calculator{--graph-bg:#fff;--graph-grid:rgba(80,92,82,.14);--graph-axis:#657166;--graph-label:#6a736b;display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:14px;align-items:start}
.graph-panel{border:1px solid var(--line);border-radius:15px;background:var(--white);box-shadow:0 8px 22px rgba(37,43,38,.035)}
.graph-panel--controls{display:grid;align-content:start;gap:12px;padding:14px}.graph-panel--plot{display:grid;grid-template-rows:auto auto auto;gap:9px;padding:11px;min-width:0;align-self:start}
.graph-panel-heading{display:grid;grid-template-columns:1fr 44px;gap:10px;align-items:start}.graph-panel-heading h2{margin:1px 0 5px;font-size:1.05rem}.graph-panel-heading p:not(.eyebrow){margin:0;color:var(--muted);font-size:.72rem;line-height:1.42}.graph-panel-heading code{font:700 .72rem ui-monospace,SFMono-Regular,Consolas,monospace}.graph-panel-heading>img{width:42px;height:42px;object-fit:contain}
.graph-expression-list{display:grid;gap:8px}.graph-expression-row{--series-color:#3f6e47;display:grid;grid-template-columns:10px 20px auto minmax(0,1fr);gap:6px;align-items:center;padding:7px 8px;border:1px solid var(--line);border-radius:10px;background:rgba(128,128,128,.02)}.graph-expression-row.has-error{border-color:#c6483d;background:rgba(198,72,61,.035)}.graph-series-dot{width:9px;height:9px;border-radius:50%;background:var(--series-color)}.graph-expression-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--series-color)}.graph-expression-label{font-size:.72rem;font-weight:850;white-space:nowrap}.graph-expression-input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:700 .75rem ui-monospace,SFMono-Regular,Consolas,monospace;padding:4px 2px}.graph-expression-input:focus{box-shadow:0 1px 0 var(--graph-accent)}
.graph-insert-row{display:flex;flex-wrap:wrap;gap:5px}.graph-insert-row button,.graph-action-grid button,.graph-secondary-button{border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font:inherit;font-size:.66rem;font-weight:800;padding:6px 8px;cursor:pointer}.graph-insert-row button:hover,.graph-action-grid button:hover,.graph-secondary-button:hover{background:var(--graph-accent-soft);border-color:var(--graph-accent)}
.graph-range-box{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:11px;background:rgba(128,128,128,.018)}.graph-range-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.graph-range-head strong{font-size:.72rem}.graph-range-head label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.64rem}.graph-range-head select{border:1px solid var(--line);border-radius:7px;background:#fff;padding:4px 6px}.graph-range-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.graph-range-grid label{display:grid;gap:3px;color:var(--muted);font-size:.6rem;font-weight:750}.graph-range-grid input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:7px;background:#fff;padding:6px;font:inherit;font-size:.68rem}.graph-secondary-button{justify-self:start}
.graph-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.graph-action-wide{grid-column:1/-1;background:var(--graph-accent)!important;color:#fff!important;border-color:var(--graph-accent)!important}.graph-action-wide:hover{filter:brightness(.94)}
.graph-status{min-height:2.1em;margin:0;color:var(--muted);font-size:.64rem;line-height:1.35}.graph-status[data-state=error]{color:#a73b32}.graph-status[data-state=ok]{color:var(--muted)}
.graph-plot-head{display:flex;align-items:start;justify-content:space-between;gap:10px;padding:1px 2px}.graph-plot-head>div{display:grid;gap:2px}.graph-plot-head strong{font-size:.72rem}.graph-plot-head span:not(.graph-local-badge){color:var(--muted);font-size:.62rem}.graph-local-badge{border:1px solid var(--line);border-radius:999px;background:var(--graph-accent-soft);color:var(--graph-accent);padding:4px 7px;font-size:.58rem;font-weight:850;white-space:nowrap}
.graph-viewport{position:relative;height:clamp(360px,56vh,560px);min-height:0;max-height:560px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;touch-action:none}.graph-viewport canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab}.graph-viewport canvas.is-dragging{cursor:grabbing}.graph-help{margin:0;color:var(--muted);font-size:.62rem;line-height:1.38}.graph-note{margin-top:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:11px;background:rgba(128,128,128,.025);font-size:.68rem;line-height:1.45;color:var(--muted)}.graph-note strong{color:var(--ink)}
@media(max-width:1000px){.graph-calculator{grid-template-columns:1fr}.graph-panel--controls{grid-template-columns:1fr 1fr}.graph-panel-heading,.graph-expression-list,.graph-status{grid-column:1/-1}.graph-panel--plot{grid-template-rows:auto auto auto}.graph-viewport{height:clamp(360px,52vh,520px);min-height:0;max-height:520px}}
@media(max-width:680px){.graph-panel--controls{display:grid;grid-template-columns:1fr;padding:10px}.graph-panel-heading,.graph-expression-list,.graph-status{grid-column:auto}.graph-panel--plot{padding:8px;grid-template-rows:auto auto auto}.graph-viewport{height:clamp(330px,48vh,450px);min-height:0;max-height:450px}.graph-expression-row{grid-template-columns:9px 18px auto minmax(0,1fr);padding:6px}.graph-range-grid{grid-template-columns:1fr 1fr}.graph-plot-head{display:grid}.graph-local-badge{justify-self:start}}
@media(max-width:420px){.graph-range-grid,.graph-action-grid{grid-template-columns:1fr}.graph-action-wide{grid-column:auto}.graph-viewport{height:330px;min-height:0;max-height:330px}.graph-panel-heading{grid-template-columns:1fr 36px}.graph-panel-heading>img{width:34px;height:34px}.graph-expression-label{font-size:.65rem}.graph-expression-input{font-size:.69rem}}

@page graphSheet{size:A4 landscape;margin:8mm}
@media print{
  body.graph-print-mode{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff}
  body.graph-print-mode #site-header,body.graph-print-mode #site-footer,body.graph-print-mode .page-hero,body.graph-print-mode .section-subnav,body.graph-print-mode .breadcrumbs,body.graph-print-mode .graph-note{display:none!important}
  body.graph-print-mode .section,body.graph-print-mode .page-content,body.graph-print-mode .container,body.graph-print-mode .section-layout,body.graph-print-mode .content-shell{display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
  body.graph-print-mode .graph-calculator{page:graphSheet;display:grid!important;grid-template-columns:68mm minmax(0,1fr)!important;gap:5mm!important;align-items:start!important}
  body.graph-print-mode .graph-panel{box-shadow:none!important;border-color:#bbb!important;break-inside:avoid!important}
  body.graph-print-mode .graph-panel--controls{padding:4mm!important;gap:2.6mm!important}
  body.graph-print-mode .graph-panel--plot{padding:3mm!important;gap:2mm!important}
  body.graph-print-mode .graph-insert-row,body.graph-print-mode .graph-action-grid,body.graph-print-mode .graph-status,body.graph-print-mode .graph-help{display:none!important}
  body.graph-print-mode .graph-panel-heading>img{width:10mm!important;height:10mm!important}
  body.graph-print-mode .graph-panel-heading h2{font-size:11pt!important}
  body.graph-print-mode .graph-panel-heading p:not(.eyebrow){font-size:7pt!important}
  body.graph-print-mode .graph-expression-list{gap:2mm!important}
  body.graph-print-mode .graph-expression-row{padding:2mm!important}
  body.graph-print-mode .graph-expression-input{font-size:8pt!important}
  body.graph-print-mode .graph-range-box{padding:2.5mm!important;gap:2mm!important}
  body.graph-print-mode .graph-range-grid input{padding:1.5mm!important;font-size:7pt!important}
  body.graph-print-mode .graph-viewport{height:155mm!important;min-height:155mm!important;max-height:155mm!important}
  body.graph-print-mode .graph-plot-head strong{font-size:8pt!important}
  body.graph-print-mode .graph-plot-head span{font-size:7pt!important}
}

.graph-axis-note{color:var(--muted);font-size:.62rem;font-weight:760}


/* =========================================================
   Hatarja V8 · Área privada estructurada con submenú lateral
   ========================================================= */
.private-unlocked{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
.private-nav-panel{display:none!important}
.private-content{min-width:0}
.private-page--placeholder{display:grid;gap:8px}
.private-page--placeholder>p{max-width:760px}
.private-ready-note{display:grid;gap:2px;margin-top:8px;padding:11px 13px;border:1px dashed var(--line);border-radius:12px;background:rgba(128,128,128,.035)}
.private-ready-note strong{font-size:.78rem}.private-ready-note span{font-size:.7rem;line-height:1.45;color:var(--muted)}
@media(max-width:860px){.private-content{padding:18px}}

/* V8 entrega 21 — Área privada: acceso previo con solo la raíz visible */
body.private-auth-locked[data-page="area-privada"] #section-subnav .section-subnav-heading .subnav-tree-all{display:none!important}
body.private-auth-locked[data-page="area-privada"] #section-subnav .section-subnav-links > :not(:first-child){display:none!important}


/* Hatarja V8.22 — traducción automática */
.translator-actions{align-items:center;justify-content:space-between}
.translator-auto-toggle{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.62);color:var(--muted);font-size:.68rem;font-weight:720;cursor:pointer;user-select:none}
.translator-auto-toggle input{width:15px;height:15px;margin:0;accent-color:var(--menu-electric);cursor:pointer}
.translator-auto-toggle:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--menu-electric) 18%,transparent)}
@media(max-width:620px){.translator-actions{align-items:stretch}.translator-auto-toggle{justify-content:center;flex:1 1 100%}}


/* Hatarja V8 · traductor largo y traducción de archivos */
.translator-file-panel{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.44)}
.translator-file-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.translator-file-head h2{margin:2px 0 5px;font-size:1.05rem}.translator-file-head p:not(.eyebrow){margin:0;max-width:760px;color:var(--muted);font-size:.72rem;line-height:1.45}
.translator-file-drop{margin-top:12px;min-height:128px;border:1.5px dashed color-mix(in srgb,var(--menu-electric) 36%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--menu-electric) 4%,transparent);display:grid;place-items:center;align-content:center;gap:5px;padding:16px;text-align:center;transition:.18s ease}.translator-file-drop.is-dragging{border-color:var(--menu-electric);background:color-mix(in srgb,var(--menu-electric) 10%,transparent);transform:translateY(-1px)}
.translator-file-drop-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--menu-electric) 13%,white);font-size:1.2rem;font-weight:800}.translator-file-drop strong{font-size:.84rem}.translator-file-drop span,.translator-file-drop small{color:var(--muted);font-size:.68rem}.translator-file-drop button{margin-top:3px}
.translator-file-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.translator-file-grid label{display:grid;gap:6px}.translator-file-grid label>span{font-size:.68rem;font-weight:780;color:var(--muted)}.translator-file-grid textarea{width:100%;min-height:190px;max-height:340px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:10px;background:rgba(255,255,255,.74);font:inherit;font-size:.73rem;line-height:1.45;white-space:pre-wrap}
.translator-file-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.translator-file-note{margin:8px 0 0;color:var(--muted);font-size:.65rem;line-height:1.45}
@media(max-width:760px){.translator-file-head{display:grid}.translator-file-grid{grid-template-columns:1fr}.translator-file-grid textarea{min-height:150px}}

/* V8 · mapa meteorológico Leaflet responsive: interacción táctil controlada */
.env-mini-map .env-weather-leaflet{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:#edf1ec}
.env-mini-map .env-weather-leaflet .leaflet-control-attribution{font-size:8px;line-height:1.15}
.env-mini-map .env-weather-leaflet .leaflet-control-zoom a{width:28px;height:28px;line-height:28px;font-size:18px}
.env-mini-map .env-weather-overlay{z-index:4;pointer-events:none}
@media(max-width:520px){.env-mini-map .env-weather-leaflet .leaflet-control-zoom a{width:30px;height:30px;line-height:30px}}


/* =========================================================
   HATARJA V8 — Ajuste visual traductor de archivos + temperatura diaria
   2026-10-25
   ========================================================= */
body[data-page="recursos-traductor"] .translator-file-panel{
  margin-top:18px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.48);
}
body[data-page="recursos-traductor"] .translator-file-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
body[data-page="recursos-traductor"] .translator-file-head .eyebrow{
  margin:0 0 3px;
  font-size:.64rem;
  line-height:1.3;
}
body[data-page="recursos-traductor"] .translator-file-head h2{
  margin:0 0 5px;
  font-size:1.05rem;
  line-height:1.2;
}
body[data-page="recursos-traductor"] .translator-file-head p:not(.eyebrow){
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.5;
}
body[data-page="recursos-traductor"] .translator-file-drop{
  min-height:118px;
  margin-top:8px;
  padding:14px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  border:1px dashed color-mix(in srgb,var(--menu-electric) 42%,var(--line));
  border-radius:10px;
  background:rgba(255,255,255,.58);
  text-align:center;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
body[data-page="recursos-traductor"] .translator-file-drop.is-dragging{
  border-color:var(--menu-electric);
  background:color-mix(in srgb,var(--menu-electric) 8%,rgba(255,255,255,.72));
  transform:translateY(-1px);
}
body[data-page="recursos-traductor"] .translator-file-drop-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--menu-electric) 26%,var(--line));
  border-radius:50%;
  background:color-mix(in srgb,var(--menu-electric) 9%,white);
  font-size:1.05rem;
  font-weight:800;
}
body[data-page="recursos-traductor"] .translator-file-drop strong{font-size:.82rem;line-height:1.3}
body[data-page="recursos-traductor"] .translator-file-drop span,
body[data-page="recursos-traductor"] .translator-file-drop small{color:var(--muted);font-size:.69rem;line-height:1.35}
body[data-page="recursos-traductor"] .translator-file-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
body[data-page="recursos-traductor"] .translator-file-grid label{
  min-width:0;
  padding:12px;
  display:grid;
  gap:7px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.48);
}
body[data-page="recursos-traductor"] .translator-file-grid label>span{
  color:inherit;
  font-size:.76rem;
  font-weight:700;
}
body[data-page="recursos-traductor"] .translator-file-grid textarea{
  width:100%;
  min-height:190px;
  max-height:360px;
  box-sizing:border-box;
  resize:vertical;
  padding:11px;
  border:0;
  border-radius:9px;
  background:rgba(255,255,255,.62);
  color:inherit;
  font:inherit;
  font-size:.93rem;
  line-height:1.55;
  white-space:pre-wrap;
  outline:none;
}
body[data-page="recursos-traductor"] .translator-file-grid textarea:focus{box-shadow:inset 0 0 0 1px var(--menu-electric)}
body[data-page="recursos-traductor"] .translator-file-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
body[data-page="recursos-traductor"] .translator-file-note{margin:9px 0 0;color:var(--muted);font-size:.68rem;line-height:1.48}

.env-temp-extremes{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:4px;
}
.env-temp-extreme{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(255,255,255,.58);
  white-space:nowrap;
}
.env-temp-extreme em{font-style:normal;color:var(--muted);font-size:.62rem;font-weight:700}
.env-temp-extreme b{font-size:.72rem;line-height:1.2}

@media(max-width:760px){
  body[data-page="recursos-traductor"] .translator-file-head{display:grid}
  body[data-page="recursos-traductor"] .translator-file-grid{grid-template-columns:1fr}
  body[data-page="recursos-traductor"] .translator-file-grid textarea{min-height:170px}
}
@media(max-width:520px){
  body[data-page="recursos-traductor"] .translator-file-panel,
  body[data-page="recursos-traductor"] .translator-file-grid label{padding:10px}
  body[data-page="recursos-traductor"] .translator-file-drop{min-height:108px;padding:12px}
}


/* Hatarja V8 — selector de idioma y contadores del traductor de documentos */
body[data-page="recursos-traductor"] .translator-file-language-row{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(210px,1fr);
  gap:10px;
  margin-top:10px;
}
body[data-page="recursos-traductor"] .translator-file-language-static,
body[data-page="recursos-traductor"] .translator-file-language-target{
  min-width:0;
  display:grid;
  gap:5px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.58);
}
body[data-page="recursos-traductor"] .translator-file-language-static span,
body[data-page="recursos-traductor"] .translator-file-language-target>span{
  color:var(--muted);
  font-size:.66rem;
  font-weight:760;
}
body[data-page="recursos-traductor"] .translator-file-language-static strong{
  font-size:.76rem;
  font-weight:760;
}
body[data-page="recursos-traductor"] .translator-file-language-target select{
  width:100%;
  min-height:34px;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.86);
  color:inherit;
  font:inherit;
  font-size:.74rem;
}
body[data-page="recursos-traductor"] .translator-file-box-title{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:5px 10px;
}
body[data-page="recursos-traductor"] .translator-file-box-title .translator-counter{
  font-weight:500;
  white-space:nowrap;
}
@media(max-width:620px){
  body[data-page="recursos-traductor"] .translator-file-language-row{grid-template-columns:1fr}
}

/* Conversor de referencias: selector de estilo compacto y adaptable */
.apa-style-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 9px;
}
.apa-style-bar h2 { margin: 0; }
.apa-style-bar label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 750;
}
.apa-style-bar select {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 33px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.92);
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
}
@media (max-width: 620px) {
  .apa-style-bar { align-items: stretch; }
  .apa-style-bar label { flex-wrap: wrap; width: 100%; }
  .apa-style-bar select { flex: 1 1 190px; min-width: 0; }
}


/* v8 · ajuste ligero de densidad para Hashes y verificación */
.hash-tool{gap:10px}
.hash-tool .hash-mode-deck{padding:9px 10px;gap:7px}
.hash-tool .resource-mode-options>button{min-height:46px;padding:6px 10px!important}
.hash-tool .hash-card{padding:12px 13px}
.hash-tool .hash-card label{gap:5px;font-size:.86rem}
.hash-tool .hash-settings{margin-bottom:10px}
.hash-tool .hash-calculate{margin-top:9px}
.hash-tool .hash-card textarea,.hash-tool .hash-card select{padding:8px 10px;font-size:.89rem}
.hash-tool #hash-text{min-height:110px}
.hash-tool #hash-output{min-height:60px}
.hash-tool #hash-expected{min-height:52px}
.hash-tool .hash-help{margin:6px 0 0;line-height:1.38}
.hash-tool .hash-status{margin:7px 0 0;min-height:1.3em;font-size:.85rem}
.hash-tool .hash-details{margin:0}
.hash-tool .hash-note{padding:10px 12px;line-height:1.4}
@media(max-width:720px){.hash-tool .resource-mode-options>button{min-height:44px}}