/* ============================================================
 * bromatologia.css — Sección Bromatología (Dirección de Bromatología)
 * Complementa ayuda.css con componentes propios del módulo.
 * Patrón validado de Comercio/Licencias (shell mockup C + hero ayuda).
 * Autocontenido: clases brm-* propias, sin acoplar a comercio.css.
 * © 2026 AS Sistemas · Alberto Salafia · Todos los derechos reservados
 * ============================================================ */

:root {
  --brm-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Hero partido del HUB (texto + foto identitaria) ─────── */
.brm-herowrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}
@media (min-width: 880px) {
  .brm-herowrap {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-10);
    align-items: center;
  }
}
.brm-herowrap__text { margin-bottom: 0; }

.brm-herowrap__media { position: relative; margin: 0; }
.brm-herowrap__frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--c-accent);
  border-radius: var(--r-lg);
  transform: translate(16px, 16px);
  z-index: 0;
  pointer-events: none;
}
.brm-herowrap__mediabox {
  display: block;
  position: relative;
  z-index: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--c-bg-soft);
  box-shadow: 0 18px 40px rgba(14, 31, 64, 0.16);
  animation: brmHeroReveal 1100ms var(--brm-ease) both;
}
.brm-herowrap__mediabox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 55% 45%;
  animation: brmHeroKen 24s ease-in-out 1.1s infinite alternate;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .brm-herowrap__media:hover .brm-herowrap__mediabox img { animation-play-state: paused; }
}
@keyframes brmHeroReveal {
  from { clip-path: inset(0 0 100% 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes brmHeroKen {
  from { transform: scale(1.01); }
  to   { transform: scale(1.09) translate(-1.6%, -1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .brm-herowrap__mediabox { animation: none; }
  .brm-herowrap__mediabox img { animation: none; }
}

/* Placeholder del hero mientras no haya imagen real (sin <img> roto) */
.brm-herowrap__mediabox--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(2,165,82,0.14), transparent 60%),
    linear-gradient(135deg, #0E1F40, #142D5C);
}
.brm-herowrap__mediabox--ph svg { width: 96px; height: 96px; color: rgba(255,255,255,0.55); }

/* ── Banda "el equipo que te atiende" (foto real + scroll-reveal) ── */
.brm-team {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin: var(--s-12) 0;
  align-items: center;
}
@media (min-width: 880px) {
  .brm-team { grid-template-columns: 1.1fr 1fr; gap: var(--s-10); }
}
.brm-team__media { position: relative; margin: 0; }
.brm-team__frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--c-accent);
  border-radius: var(--r-lg);
  transform: translate(-16px, 16px);
  z-index: 0;
  pointer-events: none;
}
.brm-team__box {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  box-shadow: 0 18px 40px rgba(14, 31, 64, 0.16);
}
.brm-team__box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
  transition: transform 1.4s var(--brm-ease);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .brm-team:hover .brm-team__box img { transform: scale(1); }
}
.brm-team__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 2.2rem 1rem .9rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}
.brm-team__cap svg { flex-shrink: 0; }
.brm-team__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-2);
}
.brm-team__title {
  font-size: var(--fs-2xl);
  line-height: 1.1;
  margin: 0 0 var(--s-3);
  color: var(--c-ink);
}
.brm-team__lede {
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-4);
  line-height: 1.6;
  max-width: 46ch;
}
.brm-team__meta {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

/* Scroll-reveal genérico (oculto solo si el JS confirma soporte) */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--brm-ease), transform .8s var(--brm-ease);
}
.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .brm-team__media img { transition: none; transform: none; }
}

/* ── Buscador instantáneo (hub) ──────────────────────────── */
.brm-search { margin: var(--s-6) 0 var(--s-10); position: relative; }
.brm-search__field { position: relative; display: flex; align-items: center; }
.brm-search__icon {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--c-ink-muted);
  pointer-events: none;
}
.brm-search__icon svg { width: 20px; height: 20px; }
.brm-search__input {
  width: 100%;
  padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 28px);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color 160ms var(--brm-ease), box-shadow 160ms var(--brm-ease);
}
.brm-search__input::placeholder { color: var(--c-ink-muted); }
.brm-search__input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(27, 61, 121, 0.12);
}
.brm-search__empty {
  display: none;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  text-align: center;
}
.brm-search__empty[data-visible="true"] { display: block; }

/* ── "Qué hace el área" — funciones en grilla ────────────── */
.brm-func { margin: 0 0 var(--s-10); }
.brm-func__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px) { .brm-func__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .brm-func__grid { grid-template-columns: 1fr 1fr 1fr; } }
.brm-func__item {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.brm-func__item strong { color: var(--c-ink); font-weight: 700; display: block; margin-bottom: 2px; }
.brm-func__ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--c-bg-soft);
  color: var(--c-accent);
}
.brm-func__ico svg { width: 18px; height: 18px; }

/* ── Grilla de trámites (hub) ────────────────────────────── */
.brm-cat { margin-bottom: var(--s-10); }
.brm-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
}
.brm-cat__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.brm-cat__count {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.brm-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 600px) { .brm-grid { grid-template-columns: 1fr 1fr; } }

/* ── Card de trámite ─────────────────────────────────────── */
.brm-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 160ms var(--brm-ease), border-color 160ms var(--brm-ease), box-shadow 160ms var(--brm-ease);
}
.brm-card:hover { transform: translateY(-2px); border-color: var(--c-primary); box-shadow: var(--sh-sm); }
.brm-card:active { transform: scale(0.99); }
.brm-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--c-bg-soft);
  color: var(--c-primary);
  margin-bottom: var(--s-1);
}
.brm-card__icon svg { width: 22px; height: 22px; }
.brm-card__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.brm-card__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.brm-card__sub { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.45; }
.brm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
}
.brm-card__arrow {
  font-size: 1.2em;
  color: var(--c-primary);
  font-weight: 700;
  transition: transform 160ms var(--brm-ease);
}
.brm-card:hover .brm-card__arrow { transform: translateX(3px); }

/* Card destacada (el trámite más pedido) — ancha arriba de la grilla */
.brm-card--feature { grid-column: 1 / -1; }
.brm-card--feature .brm-card__eyebrow { color: var(--c-accent); }
@media (min-width: 600px) {
  .brm-card--feature {
    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
    background:
      linear-gradient(90deg, rgba(2,165,82,0.06), transparent 60%),
      var(--c-bg-card);
  }
  .brm-card--feature .brm-card__icon { margin: 0; width: 52px; height: 52px; }
  .brm-card--feature .brm-card__icon svg { width: 28px; height: 28px; }
  .brm-card--feature .brm-card__main { display: flex; flex-direction: column; gap: var(--s-1); flex: 1; min-width: 0; }
  .brm-card--feature .brm-card__foot { margin: 0; padding: 0; white-space: nowrap; }
}

/* Acento por trámite (borde superior fino) */
.brm-card--carnet    { border-top: 3px solid #02A552; }
.brm-card--local     { border-top: 3px solid #1B3D79; }
.brm-card--foodtruck { border-top: 3px solid #EFB326; }
.brm-card--producto  { border-top: 3px solid #775489; }
.brm-card--delivery  { border-top: 3px solid #3F97BC; }
.brm-card--fracc     { border-top: 3px solid #C2410C; }
.brm-card--transporte{ border-top: 3px solid #0E7490; }

/* ── Datos clave (ficha) ─────────────────────────────────── */
.brm-key {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
@media (min-width: 720px) { .brm-key { grid-template-columns: repeat(3, 1fr); } }
.brm-key__item {
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.brm-key__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: 4px;
}
.brm-key__value {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.brm-key__value small {
  display: block;
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-ink-soft);
  margin-top: 2px;
}

/* ── Aviso (info) ────────────────────────────────────────── */
.brm-aviso {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-5);
  background: #EFF6FF;
  border-left: 4px solid #1E40AF;
  border-radius: var(--r-sm);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.brm-aviso__icon { flex-shrink: 0; width: 22px; height: 22px; color: #1E40AF; }
.brm-aviso__icon svg { width: 22px; height: 22px; }
.brm-aviso__body { font-size: var(--fs-sm); color: var(--c-ink); line-height: 1.5; }
.brm-aviso__body strong { color: #1E3A8A; font-weight: 700; }
.brm-aviso__body a { color: #1E40AF; font-weight: 700; }
.brm-aviso--mt { margin-top: var(--s-5); }
/* Variante verde (cruce a alimentos / sanitario) */
.brm-aviso--ok { background: #ECFDF3; border-left-color: #02A552; }
.brm-aviso--ok .brm-aviso__icon { color: #02A552; }
.brm-aviso--ok .brm-aviso__body strong { color: #166534; }
.brm-aviso--ok .brm-aviso__body a { color: #166534; }

/* Utilitarias de texto (sin inline, CSP-safe) */
.brm-lead { margin: 0 0 var(--s-5); color: var(--c-ink-soft); font-size: var(--fs-base); line-height: 1.6; }
.brm-lead strong { color: var(--c-ink); font-weight: 700; }
.brm-fineprint { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-muted); }
.brm-fineprint strong { color: var(--c-ink); font-weight: 700; }

/* ── Pasos del trámite (procedimiento administrativo) ────── */
.brm-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  counter-reset: brm-step;
}
@media (min-width: 720px) { .brm-steps { grid-template-columns: 1fr 1fr; } }
.brm-steps li {
  position: relative;
  padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-6) + 30px);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.brm-steps li::before {
  counter-increment: brm-step;
  content: counter(brm-step);
  position: absolute;
  inset-block-start: var(--s-5);
  inset-inline-start: var(--s-4);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
}
.brm-steps li h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.brm-steps li p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.55; }
.brm-steps li strong { color: var(--c-ink); font-weight: 700; }

/* ── Requisitos con checks (ficha) ───────────────────────── */
.brm-reqs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) { .brm-reqs { grid-template-columns: 1fr 1fr; } }
.brm-reqs li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.4;
}
.brm-reqs li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: var(--c-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.brm-reqs li strong { color: var(--c-ink); font-weight: 700; }
.brm-reqs li small { display: block; color: var(--c-ink-muted); font-size: var(--fs-xs); margin-top: 2px; }
.brm-reqs li[data-opt]::after {
  content: 'si corresponde';
  margin-inline-start: auto;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--c-bg-soft);
  color: var(--c-ink-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brm-reqs > li.brm-reqs--full { grid-column: 1 / -1; }

/* ── Acordeón (FAQ / clases de detalle) ──────────────────── */
.brm-acc { display: grid; gap: var(--s-2); }
.brm-acc__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg-card);
  overflow: hidden;
  transition: border-color 160ms var(--brm-ease), box-shadow 160ms var(--brm-ease);
}
.brm-acc__item[open] { border-color: var(--c-border-strong); box-shadow: var(--sh-sm); }
.brm-acc__item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  font-size: var(--fs-base);
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.brm-acc__item > summary::-webkit-details-marker { display: none; }
.brm-acc__item > summary::after {
  content: '+';
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--c-primary);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 160ms var(--brm-ease);
}
.brm-acc__item[open] > summary::after { transform: rotate(45deg); }
.brm-acc__body { padding: 0 var(--s-5) var(--s-4); }
.brm-acc__body p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.6; }
.brm-acc__body strong { color: var(--c-ink); font-weight: 700; }

/* ── Bloque denuncia sanitaria (destacado) ───────────────── */
.brm-denuncia {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(135deg, #FFF7ED, #FEF2F2);
  border: 1px solid #FED7AA;
  border-radius: var(--r-md);
}
.brm-denuncia__ico {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid #FED7AA;
  color: #C2410C;
}
.brm-denuncia__ico svg { width: 24px; height: 24px; }
.brm-denuncia__body { flex: 1; min-width: 0; }
.brm-denuncia__body h3 {
  margin: 0 0 var(--s-1);
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  color: var(--c-ink);
}
.brm-denuncia__body p { margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.55; }

/* ── Marco normativo (3 niveles) ─────────────────────────── */
.brm-norma { display: grid; gap: var(--s-3); }
@media (min-width: 760px) { .brm-norma { grid-template-columns: repeat(3, 1fr); } }
.brm-norma__item {
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  border-top: 3px solid var(--c-primary);
}
.brm-norma__tag {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--s-2);
}
.brm-norma__item p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.55; }
.brm-norma__item strong { color: var(--c-ink); font-weight: 700; }

/* ── CTA WhatsApp inline (genérica) ──────────────────────── */
.brm-wa {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--c-accent);
  color: #fff;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  text-decoration: none;
  border-radius: var(--r-full);
  box-shadow: 0 6px 18px rgba(2, 165, 82, 0.30);
  transition: transform 160ms var(--brm-ease), box-shadow 160ms var(--brm-ease), background 160ms var(--brm-ease);
}
.brm-wa svg { width: 16px; height: 16px; }
.brm-wa:hover { background: var(--c-accent-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 165, 82, 0.40); }
.brm-wa:active { transform: scale(0.97); }
.brm-wa--alt { background: #C2410C; box-shadow: 0 6px 18px rgba(194, 65, 12, 0.28); }
.brm-wa--alt:hover { background: #9A3412; box-shadow: 0 10px 24px rgba(194, 65, 12, 0.38); }

/* ── Generador de nota (form + vista previa) ─────────────── */
.brm-gen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin: 0 0 var(--s-6);
}
@media (min-width: 860px) {
  .brm-gen { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}
.brm-gen__form {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.brm-field { display: grid; gap: var(--s-2); }
.brm-field label { font-size: var(--fs-sm); font-weight: 700; font-variation-settings: 'wght' 700; color: var(--c-ink); }
.brm-field input, .brm-field textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  transition: border-color 160ms var(--brm-ease), box-shadow 160ms var(--brm-ease);
}
.brm-field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.brm-field input::placeholder, .brm-field textarea::placeholder { color: var(--c-ink-muted); }
.brm-field input:focus, .brm-field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(27, 61, 121, 0.12);
}
.brm-field__help { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.brm-field--row { grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.brm-gen__print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-4) var(--s-6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: #fff;
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2, 165, 82, 0.30);
  transition: transform 160ms var(--brm-ease), box-shadow 160ms var(--brm-ease), background 160ms var(--brm-ease);
}
.brm-gen__print svg { width: 18px; height: 18px; }
.brm-gen__print:hover { background: var(--c-accent-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 165, 82, 0.40); }
.brm-gen__print:active { transform: scale(0.97); }

.brm-gen__preview-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0 0 var(--s-2);
}
.brm-doc {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-4);
}
.brm-doc__head { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-1) var(--s-1) 0; }
.brm-doc__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  color: var(--c-primary);
}
.brm-doc__icon svg { width: 20px; height: 20px; }
.brm-doc__meta { display: grid; gap: 4px; }
.brm-doc__chip {
  justify-self: start;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brm-doc__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: 700;
  font-variation-settings: 'wght' 720;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.brm-doc__sub { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.5; }

.brm-nota {
  max-width: 460px;
  margin-inline: auto;
  background: #fff;
  color: #1A2533;
  border: 1px solid var(--c-border-strong);
  border-radius: 2px;
  padding: clamp(2rem, 8%, 3.25rem) clamp(1.75rem, 7%, 2.75rem);
  min-height: 540px;
  box-shadow: 0 10px 30px rgba(14, 31, 64, 0.14);
  font-family: var(--ff-sans);
  line-height: 1.7;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
}
.brm-nota__place { text-align: right; margin: 0 0 var(--s-6); font-size: var(--fs-sm); color: #4A5A6B; }
.brm-nota__to { margin: 0 0 var(--s-4); }
.brm-nota__to strong { display: block; }
.brm-nota__body { margin: 0 0 var(--s-6); text-align: justify; }
.brm-nota__body span[data-out] {
  font-weight: 700;
  color: #1B3D79;
  border-bottom: 1px solid #C9D4E5;
  padding: 0 2px;
}
.brm-nota__body span[data-out].is-empty { color: #9aa7b8; font-weight: 400; border-bottom: 1px dotted #c4cdd9; }
.brm-nota__sign { margin-top: auto; padding-top: var(--s-10); display: grid; gap: 2px; font-size: var(--fs-sm); }
.brm-nota__sign-line { margin-top: var(--s-6); border-top: 1px solid #1A2533; padding-top: 4px; width: 230px; color: #4A5A6B; }

/* ── Volver al hub (ficha) ───────────────────────────────── */
.brm-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-8);
  padding: var(--s-2) var(--s-4);
  color: var(--c-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background 160ms var(--brm-ease);
}
.brm-volver:hover { background: var(--c-bg-soft); }
.brm-volver::before { content: '←'; font-size: 1.1em; }

/* ── Reducción de movimiento ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .brm-card, .brm-card__arrow, .brm-gen__print, .brm-acc__item, .brm-volver,
  .brm-search__input, .brm-field input, .brm-field textarea, .brm-wa { transition: none; }
  .brm-card:hover, .brm-gen__print:hover, .brm-wa:hover { transform: none; }
  .brm-card:active, .brm-gen__print:active, .brm-wa:active { transform: none; }
}

/* ── Impresión: solo la nota ─────────────────────────────── */
@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  .brm-nota, .brm-nota * { visibility: visible; }
  .brm-nota {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    max-width: none;
    min-height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    font-size: 12pt;
    display: block;
  }
  .brm-nota__sign { margin-top: 3rem; padding-top: 0; }
  .brm-nota__body span[data-out] { border-bottom: 0; color: #000; }
  .brm-nota__body span[data-out].is-empty { color: #000; }
  @page { margin: 2cm; }
}