/* Bravo Advocats · V4 legacy compatibility layer
   Scope: pages migrated by herramientas/migrar_legacy_v4.mjs.
   This file is deliberately additive: it normalises the old shell without
   replacing page content, forms, calculators or Clara widgets. */

html.v4-legacy {
  --v4-paper: #ffffff;
  --v4-surface: #f4f7fa;
  --v4-surface-strong: #e6eef5;
  --v4-ink: #172331;
  --v4-muted: #4e6070;
  --v4-blue: #356f9f;
  --v4-blue-strong: #245579;
  --v4-focus: #164f7a;
  --v4-danger: #8d2e38;
  --v4-radius-control: 6px;
  --v4-radius-card: 10px;
  --v4-shadow: 0 8px 28px rgb(23 35 49 / 10%);
  /* Legacy aliases are deliberately blue/neutral so old gold tokens cannot
     leak into a migrated page. */
  --gold: var(--v4-blue);
  --c-gold: var(--v4-blue);
  --c-gold-lt: var(--v4-blue);
  --c-gold-dk: var(--v4-blue-strong);
  --c-gold-bg: var(--v4-surface);
  --c-gold-brd: color-mix(in srgb, var(--v4-blue) 36%, transparent);
  --v4-content: min(1240px, calc(100% - 40px));
  color-scheme: light;
  --c-gold: var(--v4-blue);
  --c-gold-lt: var(--v4-blue-strong);
  --c-gold-dk: var(--v4-blue);
  --c-gold-bg: color-mix(in srgb, var(--v4-blue) 12%, transparent);
  --c-gold-brd: color-mix(in srgb, var(--v4-blue) 36%, transparent);
}

html.v4-legacy[data-tema="oscuro"] {
  --v4-paper: #181c20;
  --v4-surface: #232a31;
  --v4-surface-strong: #2d3943;
  --v4-ink: #f5f7f9;
  --v4-muted: #c3cbd3;
  --v4-blue: #8fc0e8;
  --v4-blue-strong: #b7dbf5;
  --v4-focus: #c9e8ff;
  /* Older service pages set these aliases on :root and their shared
     typography rules consume them directly. Rebind them in dark mode so
     legacy paragraphs, lists and callouts inherit readable foregrounds. */
  --c-text: var(--v4-ink);
  --c-muted: var(--v4-muted);
  color-scheme: dark;
}

/* Action cards use light-theme literal surfaces in marca.css. Keep their
   dark-theme foregrounds matched to an equally dark surface. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-accion {
  background: var(--v4-surface);
  border-color: color-mix(in srgb, var(--v4-ink) 24%, transparent);
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-accion:hover,
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-accion:focus-visible {
  background: var(--v4-surface-strong);
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-accion :is(.bv-accion__t, .bv-accion__d) {
  color: var(--v4-ink);
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-accion .bv-accion__d {
  color: var(--v4-muted);
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-accion svg { fill: var(--v4-blue); }
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-accion--urg svg { fill: #f0a3aa; }

/* Dark-mode contrast pass · confirmed component regressions from the full
   sitemap scan. These are literal light-theme colours in the legacy pages;
   keep the light theme unchanged and bind only their dark-mode counterparts. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-fase:not(.imp-banda .bv-fase) .bv-fase__txt {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-fase:not(.imp-banda .bv-fase) .bv-fase__num {
  color: var(--v4-muted) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-fase--activa:not(.imp-banda .bv-fase--activa) .bv-fase__num {
  color: var(--v4-blue) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(> nav.legalnav) main#contenido .legal-secciones table td:first-child {
  background: var(--v4-surface) !important;
  color: var(--v4-ink) !important;
  border-color: color-mix(in srgb, var(--v4-ink) 24%, transparent) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 details:has(> .det) {
  background: var(--v4-surface) !important;
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 details:has(> .det) :is(summary, .det h4, .det p, .det li) {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 details:has(> .det) :is(.det .ficha, .det small) {
  color: var(--v4-muted) !important;
}

/* Contrast audit 2026-10-06: legacy FAQ pages lacked this compatibility
   stylesheet entirely; once loaded, keep their disclosure labels and marker
   readable on the dark surface. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 details:has(> .det) > summary {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 details:has(> .det) > summary::after {
  color: var(--v4-blue) !important;
}

/* Old pricing pages use fixed light surfaces and navy prices. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .tarifa {
  background: var(--v4-surface) !important;
  color: var(--v4-ink) !important;
  border-color: color-mix(in srgb, var(--v4-ink) 24%, transparent) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .tarifa :is(h3, .precio, .meta b) {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .tarifa :is(.quien, .precio span, .meta) {
  color: var(--v4-muted) !important;
}

/* The sticky legal-document contents panel is cream in the legacy light CSS. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(> nav.legalnav) main#contenido .legal-cuerpo > .toc {
  background: var(--v4-surface) !important;
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(> nav.legalnav) main#contenido .legal-cuerpo > .toc :is(h2, li, a) {
  color: var(--v4-blue) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(> nav.legalnav) main#contenido .legal-cuerpo > .toc h2 {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(> nav.legalnav) > nav.legalnav {
  background: var(--v4-surface) !important;
  border-color: color-mix(in srgb, var(--v4-ink) 24%, transparent) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(> nav.legalnav) > nav.legalnav :is(a, span) {
  color: var(--v4-blue) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(> nav.legalnav) > nav.legalnav [aria-current] {
  color: var(--v4-ink) !important;
}

/* 2026-10-06 · Second full-sitemap contrast pass. Several older page
   components keep literal light-theme colours instead of consuming the V4
   tokens. Scope the correction to the dark theme and migrated shell only. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-header {
  background: color-mix(in srgb, var(--v4-surface) 96%, transparent) !important;
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-nav :is(a:not(.site-nav__reserve), .site-nav__resources-toggle),
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-nav__resources-toggle {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-nav__resources-menu {
  background: var(--v4-surface) !important;
  border-color: color-mix(in srgb, var(--v4-ink) 24%, transparent) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-nav__resources-menu a {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-nav__reserve,
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .btn-primary,
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .areas-v3-hero__cta,
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .btn-principal {
  background: #315f87 !important;
  border-color: #315f87 !important;
  color: #fff !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .btn-linea {
  color: var(--v4-blue-strong) !important;
  border-color: color-mix(in srgb, var(--v4-blue) 64%, transparent) !important;
}

/* Direction cards deliberately remain simple links; give their labels and
   copy the light-on-dark palette. The map itself is a white diagram, so its
   SVG labels stay dark and readable against that fixed white drawing. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .ruta :is(b, span) {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .ruta span { color: var(--v4-muted) !important; }
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 :is(.btn-copiar, #bv-copiar) {
  color: var(--v4-ink) !important;
  background: var(--v4-surface) !important;
  border-color: color-mix(in srgb, var(--v4-ink) 38%, transparent) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-plano :is(.texto, .texto--fuerte) {
  fill: #24384a !important;
  opacity: 1 !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-plano .texto--tenue { fill: #40566a !important; }
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .bv-sede__pie { color: var(--v4-muted) !important; }

/* Services overview and area pages have card surfaces that stay pale in the
   legacy presentation. Match the text to those surfaces instead of applying
   a blanket light foreground to every descendant. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.ip-servicios .servicios__grupo,
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.ip-servicios .servicios__rotulo,
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.ip-servicios .servicio-fila,
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.ip-servicios .servicio-fila :is(h3, p, a) {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.ip-servicios .servicios__grupo {
  background: var(--v4-surface) !important;
  border-color: color-mix(in srgb, var(--v4-ink) 22%, transparent) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.areas-v3-page {
  --areas-ink: var(--v4-ink);
  --areas-accent: var(--v4-blue-strong);
  --areas-muted: var(--v4-muted);
  --areas-blue: var(--v4-blue);
  --areas-blue-soft: var(--v4-surface);
  --areas-paper: var(--v4-paper);
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.areas-v3-page .cifra {
  background: var(--v4-surface) !important;
  border-color: color-mix(in srgb, var(--v4-ink) 22%, transparent) !important;
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.areas-v3-page .cifra :is(b, span) {
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3.areas-v3-page .credenciales {
  color: var(--v4-muted) !important;
}

/* Reservation progress / controls and older social cards also contained
   fixed navy-on-blue or navy-on-dark text. */
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(#barra) .pasos li {
  background: var(--v4-surface) !important;
  color: var(--v4-muted) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(#barra) .pasos li.activo {
  background: var(--v4-surface-strong) !important;
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(#barra) .pasos li.hecho {
  color: #b9e3c5 !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3:has(#barra) .btn:not(.btn-linea) {
  background: #315f87 !important;
  color: #fff !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-footer__social,
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-footer__social-links a {
  background: var(--v4-surface) !important;
  color: var(--v4-ink) !important;
}
html.v4-legacy[data-tema="oscuro"] body.bravo-v3 .site-footer__social :is(h2, strong, span, a) {
  color: var(--v4-ink) !important;
}

html.v4-legacy body {
  background: var(--v4-paper);
  color: var(--v4-ink);
  font-family: "Public Sans", "Public Sans respaldo", system-ui, sans-serif;
}

html.v4-legacy body > [data-javier-shell="header"],
html.v4-legacy body > [data-javier-shell="footer"],
html.v4-legacy body > [data-javier-shell="modal"] {
  width: 100%;
}

html.v4-legacy [data-javier-shell="header"] .site-header {
  position: sticky;
  top: 12px;
  z-index: 90;
  width: var(--v4-content);
  margin: 12px auto 0;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--v4-paper) 94%, transparent);
  box-shadow: var(--v4-shadow);
  backdrop-filter: blur(12px);
}

html.v4-legacy [data-javier-shell="header"] .site-header__inner {
  width: 100%;
  min-height: 68px;
  padding: 0 20px;
}

html.v4-legacy [data-javier-shell="header"] .site-nav__reserve,
html.v4-legacy [data-javier-shell="header"] .button,
html.v4-legacy [data-javier-shell="modal"] .button {
  border: 0;
  border-radius: var(--v4-radius-control);
  background: var(--v4-blue);
  color: #fff;
}

html.v4-legacy [data-javier-shell="header"] .site-nav__reserve:hover,
html.v4-legacy [data-javier-shell="header"] .button:hover,
html.v4-legacy [data-javier-shell="modal"] .button:hover {
  background: var(--v4-blue-strong);
}

html.v4-legacy :focus-visible {
  outline: 3px solid var(--v4-focus);
  outline-offset: 3px;
}

html.v4-legacy a { color: var(--v4-blue); }
html.v4-legacy a:hover { color: var(--v4-blue-strong); }
html.v4-legacy button { border-radius: var(--v4-radius-control); }
html.v4-legacy :is(.btn-oro, .button--gold, .gold, .golden) {
  background: var(--v4-blue) !important;
  border-color: var(--v4-blue) !important;
  color: #fff !important;
}

/* Legacy page chrome: only nodes explicitly marked by the transformer are
   hidden. Content, forms, calculators and Clara's non-contact widget remain. */
html.v4-legacy [data-v4-retired="shell-replaced"] { display: none !important; }

html.v4-legacy main,
html.v4-legacy .contenido,
html.v4-legacy .content,
html.v4-legacy .page-content {
  width: min(1240px, calc(100% - 40px));
  max-width: 100%;
  margin-inline: auto;
}

html.v4-legacy article,
html.v4-legacy .card,
html.v4-legacy .tarjeta,
html.v4-legacy .bloque,
html.v4-legacy .panel {
  border-radius: var(--v4-radius-card);
}

/* Keep functional controls legible; do not erase their borders. */
html.v4-legacy input,
html.v4-legacy select,
html.v4-legacy textarea,
html.v4-legacy fieldset,
html.v4-legacy [role="dialog"],
html.v4-legacy table {
  border-radius: var(--v4-radius-control);
}

html.v4-legacy input,
html.v4-legacy select,
html.v4-legacy textarea {
  border-color: color-mix(in srgb, var(--v4-ink) 32%, transparent);
  background: var(--v4-paper);
  color: var(--v4-ink);
}

html.v4-legacy .site-footer,
html.v4-legacy [data-javier-shell="footer"] .site-footer {
  margin-top: 64px;
  padding: 48px 20px 56px;
  background: var(--v4-ink);
  color: var(--v4-paper);
}

html.v4-legacy [data-javier-shell="footer"] .site-footer a,
html.v4-legacy [data-javier-shell="footer"] .site-footer p { color: var(--v4-muted); }
html.v4-legacy [data-javier-shell="footer"] .site-footer a:hover { color: var(--v4-paper); }

/* Remove decorative hairlines only from legacy presentation patterns. */
html.v4-legacy .v4-legacy-rule,
html.v4-legacy .decorative-rule,
html.v4-legacy .ai-line,
html.v4-legacy .filete-decorativo,
html.v4-legacy :is(hr, [class*="decorative-line"], [class*="decorative-filete"], [class*="ai-line"]) {
  display: none !important;
}

html.v4-legacy[data-tema="oscuro"] body,
html.v4-legacy[data-tema="oscuro"] main,
html.v4-legacy[data-tema="oscuro"] .contenido,
html.v4-legacy[data-tema="oscuro"] .content { background: var(--v4-paper); color: var(--v4-ink); }

html.v4-legacy[data-tema="oscuro"] .card,
html.v4-legacy[data-tema="oscuro"] .tarjeta,
html.v4-legacy[data-tema="oscuro"] .bloque,
html.v4-legacy[data-tema="oscuro"] .panel,
html.v4-legacy[data-tema="oscuro"] [role="dialog"] {
  background: var(--v4-surface);
  color: var(--v4-ink);
}

html.v4-legacy[data-tema="oscuro"] input,
html.v4-legacy[data-tema="oscuro"] select,
html.v4-legacy[data-tema="oscuro"] textarea {
  background: var(--v4-surface);
  color: var(--v4-ink);
  border-color: color-mix(in srgb, var(--v4-ink) 45%, transparent);
}

@media (max-width: 780px) {
  html.v4-legacy { --v4-content: calc(100% - 32px); }
  html.v4-legacy [data-javier-shell="header"] .site-header { top: 8px; margin-top: 8px; }
  html.v4-legacy [data-javier-shell="header"] .site-header__inner { min-height: 62px; padding-inline: 14px; }
  html.v4-legacy main,
  html.v4-legacy .contenido,
  html.v4-legacy .content,
  html.v4-legacy .page-content { width: var(--v4-content); }
}

@media (prefers-reduced-motion: reduce) {
  html.v4-legacy *, html.v4-legacy *::before, html.v4-legacy *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* P0 geometry guard · 2026-09-28. A legacy page owns the viewport; its
   sections, not body/main, provide the readable centered measure. */
html.v4-legacy,
html.v4-legacy body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html.v4-legacy body {
  max-width: 100vw;
  overflow-x: clip;
  padding-bottom: 78px;
}
html.v4-legacy body > :not([data-javier-shell="header"]):not([data-javier-shell="footer"]):not([data-javier-shell="modal"]) {
  max-width: none;
  min-width: 0;
}
html.v4-legacy main,
html.v4-legacy .v4-legacy-page,
html.v4-legacy .page-shell,
html.v4-legacy .site-main {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}
html.v4-legacy main#contenido { padding-inline: 0; }
html.v4-legacy main#contenido > :where(section, article, figure, nav, .bloque, .panel, .card) {
  width: min(1040px, calc(100% - 40px));
  max-width: calc(100% - 40px);
  min-width: 0;
  margin-inline: auto;
}
html.v4-legacy [data-v4-retired="shell-replaced"] { display: none !important; }
@media (max-width: 780px) {
  html.v4-legacy main#contenido > :where(section, article, figure, nav, .bloque, .panel, .card) {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }
}

/* V4.1 alignment: legacy content follows the same editorial grid. */
html.v4-legacy { --v4-content: min(1180px, calc(100% - 40px)); }
html.v4-legacy main#contenido > :where(section, article, figure, nav, .bloque, .panel, .card) { width: min(1180px, calc(100% - 40px)); max-width: 1180px; }
html.v4-legacy :is(article, .card, .tarjeta, .bloque, .panel) { border-radius: 0; }