@font-face{
  font-family:"Inter";
  src:url("./assets/fonts/Inter-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

/* =========================================================
   V4 HOME · Carriles de vuelta al documento fuente
   ========================================================= */


:root{
  --bg:#ffffff;
  --fg:#111;
  --muted:#6b7280;
  --line:rgba(0,0,0,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.06);
  --r:14px;
  --brand-red: #d72626;
  --brand-link: #6f7682;
  --brand-link-hover: #111;
  
  /* LAB V3 · visor “lupa” */
  --hero-cta-w: 142px;
  --viewer-h: 520px;
  --viewer-pad: 10px;
  --viewer-bg: #f2f3f5;
  --page-bg: #fff;
  --page-shadow: 0 8px 22px rgba(0,0,0,.10);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.wrap{
  max-width: 1200px;
  margin: 24px auto 22px auto;
  padding: 0 18px 96px 28px;
  position: relative;
}

body.fs-on .wrap{
  max-width: none;
  margin: 0;
  padding: 10px 10px 10px;
  position: relative;
}



.top h1{
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.01em;
}

.sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

code{
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius: 6px;
}

/* =========================
   HEADER / MARCA LAB V3
   ========================= */

.imc-header-lab{
  position: fixed;
  left: 20px;
  top: 32px;
  width: 170px;
  z-index: 20;
}

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

.logo-text{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111;
}

.logo-icon svg{
  display: block;
  fill: var(--brand-red);
}

.header-secondary--desktop{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-secondary--desktop a{
  width: fit-content;
  font-size: 13px;
  line-height: 1.25;
  color: var(--brand-link);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,.22);
}

.header-secondary--desktop a:hover{
  color: var(--brand-link-hover);
  border-bottom-color: #111;
}



/* En pantallas medianas/pequeñas, volver arriba del lienzo */
@media (max-width: 1100px){
  .imc-header-lab{
    position: static;
    width: auto;
    margin-bottom: 16px;
  }

  .header-secondary--desktop{
    margin-top: 10px;
  }


}


/* Botones */
.btn{
  border: 1px solid #111;
  background: #111;
  color:#fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  backface-visibility: hidden;
}

.btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.btn-ghost{
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  backface-visibility: hidden;
}

.btn-primary-action{
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

.btn-primary-action:disabled{
  background: #a6a6a6;
  border-color: #a6a6a6;
  color: #fff;
  opacity: 1;
}

.btn-apply-download{
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.btn-apply-download *{
  pointer-events: none;
}

.mini-field{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mini-field--file-only{
  width: 100%;
}

.mini-field--file-only input[type="file"]{
  max-width: 100%;
  font-size: 0;
}

.mini-field--file-only input[type="file"]::file-selector-button{
  font-size: 13px;
}

.mini-label{
  font-size: 12px;
  font-weight: 700;
}

.mini-meta{
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v4-home-page{
  background:#fff;
  overflow-y:scroll;
  font-family:"Inter", sans-serif;
}

.v4-home-page .v4-wrap{
  max-width:none;
  margin:0;
  padding:0 0 80px;
}

.v4-home-page .v4-header{
  position: sticky !important;
  top:0;
  width:100% !important;
  min-height:53px;
  display: flex !important;
  align-items: center !important;
  justify-content:space-between !important;
  gap:24px !important;
  margin:0 !important;
  padding:12px 24px !important;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}

.v4-home-page .brand{ flex:0 0 auto; gap:8px; }
.v4-home-page .logo-monogram{
  color:#111827; font-size:20px; line-height:28px; font-weight:900;
  letter-spacing:-.025em;
}
.v4-home-page .logo-text{
  color:#6b7280; font-size:14px; line-height:20px; font-weight:500;
  letter-spacing:0; text-transform:none;
}
.v4-home-page .logo-text strong{ color:#ef4444; font-weight:700; }
.v4-home-page .logo-icon{ font-size:18px; line-height:28px; }

.v4-home-page .v4-nav{
  margin-top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:24px;
}

.v4-home-page .v4-nav a{
  border:0;
  color:#4b5563;
  font-size:14px;
  line-height:20px;
  white-space:nowrap;
}
.v4-home-page .v4-nav a:hover{ color:#111827; }
.v4-home-page .v4-nav .v4-nav-language{
  display:inline-flex; align-items:center; gap:4px;
  font-size:16px; font-weight:500; line-height:24px;
}
.v4-nav-language svg{ width:14px; height:14px; flex:0 0 14px; }

.v4-home{
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.v4-hero{
  max-width: 920px;
}

.v4-kicker{
  margin: 0 0 12px 0;
  color: var(--brand-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.v4-hero-title{
  margin: 0;
  color: #202832;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 780;
}

.v4-hero-lead{
  margin: 22px 0 0 0;
  max-width: 760px;
  color: #4b5563;
  font-size: 19px;
  line-height: 1.45;
}

.v4-hero-pills{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 6px 16px rgba(0,0,0,.018);
}

.v4-hero-pills span{
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #344054;
  font-size: 13px;
  font-weight: 750;
  box-shadow: none;
  cursor: default;
  white-space: nowrap;
}

.v4-hero-pills span + span::before{
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 18px;
  border-radius: 999px;
  background: var(--brand-red);
  opacity: .5;
}

.v4-section{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.v4-section-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}

.v4-section-head h2{
  margin: 0;
  color: #202832;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 780;
}

.v4-section-head p{
  margin: 0;
  max-width: 520px;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

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

.v4-lane-card{
  min-height: 210px;
  padding: 24px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 20px;

  text-decoration: none;
  color: #111827;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(16,24,40,.07);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.v4-lane-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 24px 52px rgba(16,24,40,.12);
}

/* Ruta sin recorrido en el lanzamiento. La tarjeta conserva íntegros su color,
   su contraste y su presencia: el estado se comunica con el badge, no
   apagando la tarjeta. Solo deja de ser interactiva. */
.v4-lane-card--disabled{
  cursor: default;
}

.v4-lane-card--disabled:hover{
  transform: none;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 18px 42px rgba(16,24,40,.07);
}

.v4-lane-card--disabled .v4-lane-arrow{
  visibility: hidden;
}

/* Badge de estado: pequeño y discreto, justo debajo del texto descriptivo (el
   orden lo da el propio HTML, sin posicionamiento especial). Se cualifica con
   la tarjeta para ganar a la regla base de `.v4-lane-label`, que aparece más
   abajo en este mismo archivo. */
.v4-lane-card--disabled .v4-lane-label--status{
  margin-top: 8px;
  background: #EEEAFB;
  color: #5B46B2;
  border: 1px solid #D8D0F3;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
  box-shadow: none;
}

/* Nota bajo el badge de Word: mismo icono ⓘ que ya usa XML/HTML/LaTeX, con
   su mismo tooltip (ver más abajo, selector ampliado con `.v4-lane-note`). */
.v4-lane-note{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  color: #667085;
}

.v4-app-icon{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.v4-lane-card--indesign .v4-app-icon{
  background: linear-gradient(145deg, #4b143d, #d447a4);
}

.v4-lane-card--word .v4-app-icon{
  background: linear-gradient(145deg, #143d8f, #3d8bff);
}

.v4-lane-card--framemaker .v4-app-icon{
  background: linear-gradient(145deg, #263238, #5e7d72);
}

.v4-lane-card--markup .v4-app-icon{
  background: linear-gradient(145deg, #1f2937, #7c3aed);
  font-size: 20px;
  letter-spacing: -0.08em;
}

.v4-lane-copy{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v4-lane-label{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.045);
  color: #667085;
  font-size: 11px;
  line-height: 1;
  font-weight: 750;
}

.v4-lane-label{
  gap: 6px;
  position: relative;
}

.v4-lane-info-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.v4-lane-copy .v4-lane-info{
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.9);
  color: #667085;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
}

.v4-lane-copy .v4-lane-info:hover,
.v4-lane-copy .v4-lane-info:focus{
  color: #202832;
  border-color: rgba(0,0,0,.25);
  background: #fff;
  outline: none;
}

.v4-lane-copy .v4-lane-info-pop{
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 80;
  width: 300px;
  max-width: min(300px, calc(100vw - 40px));
  transform: translateX(-50%);
  padding: 11px 13px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
  color: #4b5563;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  font-size: 12px;
  line-height: 1.42;
  font-weight: 500;
  white-space: normal;
}

.v4-lane-copy .v4-lane-info-pop[hidden]{
  display: none !important;
}

.v4-lane-copy .v4-lane-info-pop::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) translateY(5px) rotate(45deg);
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.10);
  border-top: 1px solid rgba(0,0,0,.10);
}

.v4-lane-copy strong{
  margin-top: 3px;
  color: #202832;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.v4-lane-copy span:not(.v4-lane-label){
  color: #344054;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.v4-lane-copy em{
  max-width: 380px;
  color: #667085;
  font-style: normal;
  font-size: 14px;
  line-height: 1.42;
}

.v4-lane-arrow{
  align-self: end;
  justify-self: end;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.055);
  color: #111827;
  font-size: 16px;
  font-weight: 800;
}

.v4-utility-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.v4-utility-card{
  min-height: 170px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 30px rgba(16,24,40,.045);
}

.v4-utility-card h3{
  margin: 14px 0 8px 0;
  color: #202832;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.v4-utility-card p{
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}

.v4-status{
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}

.v4-status--soon{
  background: rgba(45,106,95,.10);
  color: #2d6a5f;
}

.v4-status--beta{
  background: rgba(215,38,38,.10);
  color: var(--brand-red);
}

.v4-status--research{
  background: rgba(31,41,55,.08);
  color: #374151;
}

.v4-context-strip{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.08);
  background: #202832;
  color: #fff;
  box-shadow: 0 18px 42px rgba(16,24,40,.12);
}

.v4-context-strip h2{
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.v4-context-strip p{
  margin: 8px 0 0 0;
  max-width: 760px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.5;
}

.v4-primary-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 999px;
  background: #fff;
  color: #202832;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.v4-primary-link:hover{
  background: #f3f4f6;
}

/* Llamada al catálogo de utilidades (página propia) */
.v4-utilities-cta{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #202832;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.v4-utilities-cta:hover{
  background: #111827;
}

.v4-utilities-cta span{
  transition: transform .16s ease;
}

.v4-utilities-cta:hover span{
  transform: translateX(3px);
}

@media (max-width: 900px){
  .v4-home-page .v4-header{
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 38px;
  }

  .v4-home-page .v4-nav{
    flex-wrap: wrap;
    gap: 12px;
  }

  .v4-section-head{
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .v4-lanes-grid,
  .v4-utility-grid{
    grid-template-columns: 1fr;
  }

  .v4-lane-card{
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
  }

  .v4-app-icon{
    width: 50px;
    height: 50px;
    border-radius: 13px;
    font-size: 20px;
  }

  .v4-lane-card--markup .v4-app-icon{
    font-size: 16px;
  }

  .v4-lane-copy strong{
    font-size: 21px;
  }

  .v4-context-strip{
    grid-template-columns: 1fr;
  }

  .v4-primary-link{
    width: fit-content;
  }
}

.v4-hero-lead p{
  margin: 0;
}

.v4-hero-more{
  margin-top: 12px;
  max-width: 720px;
}

.v4-hero-more summary{
  width: fit-content;
  cursor: pointer;
  color: #34495e;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
  border-bottom: 1px dotted rgba(52,73,94,.35);
}

.v4-hero-more summary:hover{
  color: #111827;
  border-bottom-color: rgba(17,24,39,.55);
}

.v4-hero-more p{
  margin-top: 10px;
  color: #5f6b7a;
  font-size: 16px;
  line-height: 1.5;
}

/* V4 home · ajuste de escala vertical */
.v4-home-page .v4-hero-title{
  font-size: clamp(34px, 4.6vw, 54px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
}

.v4-home-page .v4-hero-lead{
  margin-top: 18px !important;
}

.v4-home-page .v4-hero-pills{
  margin-top: 18px !important;
}

.v4-home-page .v4-home{
  gap:32px !important;
}

/* V4 · tooltip hover de la i en carriles */
.v4-lane-card{
  overflow: visible;
}

.v4-lane-label{
  gap: 5px;
  position: relative;
}

.v4-lane-label .v4-lane-info,
.v4-lane-note .v4-lane-info{
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  color: #7b8490;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  cursor: help;
  z-index: 30;
}

.v4-lane-label .v4-lane-info:hover,
.v4-lane-note .v4-lane-info:hover{
  border-color: rgba(0,0,0,.18);
  background: #fff;
  color: #344054;
}

.v4-lane-label .v4-lane-info::after,
.v4-lane-note .v4-lane-info::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  width: 310px;
  max-width: min(310px, calc(100vw - 40px));
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
  color: #4b5563;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  white-space: normal;
  text-align: left;
  transform: translateX(-50%) translateY(-2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.v4-lane-label .v4-lane-info::before,
.v4-lane-note .v4-lane-info::before{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.10);
  border-top: 1px solid rgba(0,0,0,.10);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease, visibility .14s ease;
  z-index: 31;
}

.v4-lane-label .v4-lane-info:hover::after,
.v4-lane-label .v4-lane-info:hover::before,
.v4-lane-note .v4-lane-info:hover::after,
.v4-lane-note .v4-lane-info:hover::before{
  opacity: 1;
  visibility: visible;
}

.v4-lane-label .v4-lane-info:hover::after,
.v4-lane-note .v4-lane-info:hover::after{
  transform: translateX(-50%) translateY(0);
}


/* =========================================================
   V4 HOME · Nueva home y «Tu proceso editorial» (T2.1/T2.2)
   ---------------------------------------------------------
   BLOQUE AÑADIDO, NO SUSTITUTIVO. styles-home.css lo comparten
   index.html, utilidades.html y las páginas utilidad-*.html:
   ni un selector ni un token anteriores se modifican aquí.

   Prefijo propio v4-h-. Las variables se declaran en los
   contenedores nuevos, nunca en :root, para no filtrarlas a las
   otras dos páginas. Valores tomados del prototipo aprobado
   (docs/FIGMA_Home de IMC V4/src/app/App.tsx), traducidos a CSS
   normal: sin Tailwind, sin build y sin CDN (D61).
   ========================================================= */

.v4-h-home,
.v4-h-header,
.v4-h-panel,
.v4-h-modal{
  --h-gray-50:#f9fafb;  --h-gray-200:#e5e7eb; --h-gray-300:#d1d5db;
  --h-gray-400:#9ca3af; --h-gray-500:#6b7280; --h-gray-800:#1f2937;
  --h-gray-900:#111827;
  --h-purple-50:#faf5ff; --h-purple-100:#f3e8ff; --h-purple-500:#a855f7;
  --h-purple-600:#9333ea; --h-purple-700:#7e22ce;
  --h-red-50:#fef2f2; --h-red-100:#fee2e2; --h-red-200:#fecaca;
  --h-red-500:#ef4444; --h-red-600:#dc2626; --h-red-700:#b91c1c;
  --h-blue-100:#dbeafe; --h-blue-600:#2563eb; --h-blue-700:#1d4ed8;
  --h-green-200:#bbf7d0; --h-green-300:#86efac; --h-green-500:#22c55e;
  --h-orange-100:#ffedd5; --h-orange-200:#fed7aa; --h-orange-500:#f97316;
  --h-orange-600:#ea580c;
  --h-teal-100:#ccfbf1; --h-teal-600:#0d9488;
  --h-indigo-100:#e0e7ff; --h-indigo-400:#818cf8; --h-indigo-600:#4f46e5;
  --h-violet-100:#ede9fe; --h-violet-600:#7c3aed;
  --h-yellow-300:#fde047;
  --h-ink:#2d1f6b; --h-ink-head:#251a5a; --h-indd:#49021F;
  --h-r-lg:8px; --h-r-xl:12px; --h-r-2xl:16px;
  --h-sh-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --h-sh-md:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --h-sh-xl:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  font-family:"Inter", sans-serif;
  line-height:1.5;
}

/* ── Header sticky y resumen persistente (R8) ───────────────── */
.v4-h-header{
  position: sticky; top: 0; z-index: 40;
  background:#fff; border-bottom:1px solid var(--line);
}
.v4-h-summary{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:auto; padding:7px 14px;
  border:1px solid var(--h-purple-500); border-radius:999px;
  background: var(--h-purple-50); color: var(--h-gray-900);
  font: inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.v4-h-summary:hover{ background: var(--h-purple-100); }
.v4-h-summary.is-muted{ opacity:.45; }
.v4-h-summary-cta{ color: var(--h-purple-700); }
.v4-h-summary[hidden]{ display:none; }

/* ── Estructura general ─────────────────────────────────────── */
.v4-h-home{
  display:flex; flex-direction:column; gap:32px;
  width:100%; max-width:1152px; margin-inline:auto; padding:32px 24px 0;
}
.v4-h-hero h1{
  font-size:36px; line-height:1.25; letter-spacing:-.025em; font-weight:900;
  color: var(--h-gray-900);
}
.v4-h-hero p{ margin-top:8px; color: var(--h-gray-500); font-size:16px; line-height:24px; }

/* T5.2 (UI-06) — la sombra iba DESPLAZADA hacia abajo, así que el canto
   inferior del bloque 1 sumaba borde + sombra y el canto superior del bloque 2
   solo borde: dos bloques con la misma regla se leían con grosores distintos.
   La profundidad se conserva; lo que cambia es que se reparte por igual
   alrededor de la caja en vez de acumularse en el borde de abajo. */
.v4-h-zone{
  border:1px solid oklch(0.928 0.006 264.531); border-radius: var(--h-r-2xl);
  background:#fff;
  box-shadow:0 0 3px 0 rgba(0,0,0,.08), 0 0 2px 0 rgba(0,0,0,.06);
  padding:20px;
  display:flex; flex-direction:column; gap:16px;
}
.v4-h-zone-head{ display:flex; align-items:center; gap:12px; min-height:44px; }
.v4-h-zone-num{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:20px; line-height:28px;
}
.v4-h-zone-num--1{
  background:oklch(0.637 0.237 25.331);
  box-shadow:0 4px 6px -1px oklch(0.885 0.062 18.334),
             0 2px 4px -2px oklch(0.885 0.062 18.334);
}
.v4-h-zone-num--2{ background: var(--h-blue-600); box-shadow:0 4px 6px -1px var(--h-blue-100); }
/* T5.2 (UI-02) — jerarquía: los dos títulos de zona son el primer nivel de
   lectura de la home y quedaban a la altura de un rótulo de tarjeta. Un punto
   más de cuerpo y de peso, sin llegar a titular. */
.v4-h-zone-head h2{
  font-size:20px; font-weight:800; line-height:28px; letter-spacing:-.01em;
  color:oklch(0.21 0.034 264.665);
}
.v4-h-zone-head p{
  margin-top:2px; font-size:13px; line-height:18px;
  color:oklch(0.551 0.027 264.364);
}

.v4-h-filechip{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin-block:4px;
  padding:6px 12px; border-radius:10px;
  background:oklch(0.971 0.013 17.38);
  border:1px solid oklch(0.885 0.062 18.334);
  color:oklch(0.505 0.213 27.518);
  font-size:12px; font-weight:600; line-height:16px;
}

/* Zona 1: 208 px era la altura del export y funcionaba mientras las cuatro
   descripciones cabían en tres líneas. T5.2 (UI-10) — el copy aprobado de
   «Textos asociados» no cabe, y recortarlo con puntos suspensivos no es una
   opción: el texto está revisado funcionalmente y debe leerse entero.
   208 px pasa de ALTO FIJO a ALTO MÍNIMO y desaparece el recorte a tres
   líneas. La fila sigue siendo estable porque la rejilla estira por igual
   todas las tarjetas de la fila (`align-items: stretch`, que es el valor por
   defecto): siguen midiendo lo mismo entre ellas, solo que ahora lo decide el
   contenido más largo y no un número escrito aquí. */
#v4-h-zona1 .v4-h-card{
  min-height:208px;
  border-radius:14px;
  border-color:oklch(0.928 0.006 264.531);
  color:oklch(0.21 0.034 264.665);
}
#v4-h-zona1 .v4-h-card-body{
  display:flex;
  min-height:0;
  flex:1 1 auto;
  flex-direction:column;
}
#v4-h-zona1 .v4-h-card-body > .v4-h-card-note{ display:none; }
#v4-h-zona1 .v4-h-card-foot{ margin-top:12px; }
#v4-h-zona1 .v4-h-card-foot .v4-h-card-note{
  max-width:calc(100% - 40px);
  margin-top:0;
  color:oklch(0.551 0.027 264.364);
  font-size:11px;
  font-weight:500;
  line-height:13.75px;
}
#v4-h-zona1 .v4-h-details-btn{
  position:absolute;
  right:14px;
  bottom:56px;
  z-index:2;
  padding:2px 4px;
  border-radius:4px;
  background:rgba(255,255,255,.96);
  opacity:0;
  transition:opacity .15s ease;
}
#v4-h-zona1 .v4-h-card:hover .v4-h-details-btn,
#v4-h-zona1 .v4-h-card:focus-within .v4-h-details-btn{ opacity:1; }

/* ── Iconos en caja de color ────────────────────────────────── */
.v4-h-ico{
  width:40px; height:40px; flex:0 0 40px; border-radius: var(--h-r-lg);
  display:inline-flex; align-items:center; justify-content:center;
}
.v4-h-ico svg{ width:22px; height:22px; }
.v4-h-ico--sm{ width:24px; height:24px; flex-basis:24px; border-radius:6px; }
.v4-h-ico--sm svg{ width:14px; height:14px; }
.v4-h-ico--red{ background:var(--h-red-100); color:var(--h-red-600); }
.v4-h-ico--purple{ background:var(--h-purple-100); color:var(--h-purple-600); }
.v4-h-ico--blue{ background:var(--h-blue-100); color:var(--h-blue-700); }
.v4-h-ico--violet{ background:var(--h-violet-100); color:var(--h-violet-600); }
.v4-h-ico--teal{ background:var(--h-teal-100); color:var(--h-teal-600); }
.v4-h-ico--orange{ background:var(--h-orange-100); color:var(--h-orange-600); }
.v4-h-ico--green{ background:var(--h-green-200); color:#15803d; }
.v4-h-ico--indigo{ background:var(--h-indigo-100); color:var(--h-indigo-600); }
.v4-h-ico--gray{ background:var(--h-gray-200); color:var(--h-gray-500); }
.v4-h-ico--indd{ background:rgba(73,2,31,.10); color:var(--h-indd); }
.v4-h-filechip .v4-h-ico{
  margin-bottom:0;
  border-radius:4px;
  background:oklch(0.577 0.245 27.325);
  color:#fff;
}
.v4-h-filechip .v4-h-ico svg{ stroke-width:2.5; }

#v4-h-zona1 .v4-h-card > .v4-h-ico{ margin-bottom:8px; border-radius:10px; }
#v4-h-zona1 .v4-h-ico svg{ width:24px; height:24px; }
#v4-h-zona1 .v4-h-ico--red{
  background:oklch(0.936 0.032 17.717); color:oklch(0.577 0.245 27.325);
}
#v4-h-zona1 .v4-h-ico--purple{
  background:oklch(0.946 0.033 307.174); color:oklch(0.558 0.288 302.321);
}
#v4-h-zona1 .v4-h-ico--blue{
  background:oklch(0.932 0.032 255.585); color:oklch(0.488 0.243 264.376);
}
#v4-h-zona1 .v4-h-ico--violet{
  background:oklch(0.943 0.029 294.588); color:oklch(0.541 0.281 293.009);
}
#v4-h-zona1 .v4-h-filechip .v4-h-ico--sm{
  border-radius:4px;
  background:oklch(0.577 0.245 27.325);
  color:#fff;
}
#v4-h-zona1 .v4-h-filechip .v4-h-ico--sm svg{
  width:14px; height:14px; stroke-width:2.5;
}

/* ── Tarjetas ───────────────────────────────────────────────── */
.v4-h-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
#v4-h-zona1 .v4-h-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.v4-h-card{
  position:relative; display:flex; flex-direction:column;
  padding:16px; border:2px solid var(--h-gray-200); border-radius: var(--h-r-xl);
  background:#fff; cursor:pointer; text-align:left; font:inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v4-h-card:hover{ border-color: var(--h-purple-500); }
.v4-h-card.is-selected{
  border-color: var(--h-purple-500);
  box-shadow:0 1px 2px 0 var(--h-purple-100);
}
.v4-h-card.is-awaiting{ border-color: var(--h-purple-500); border-style:dashed; }
.v4-h-card.is-disabled{
  background: var(--h-gray-50); opacity:.6; cursor:not-allowed;
}
.v4-h-card.is-disabled:hover{ border-color: var(--h-gray-200); }
.v4-h-card-title{
  font-size:14px; font-weight:600; line-height:1.25; color:var(--h-gray-900);
  margin-top:8px;
}
.v4-h-card-desc{ font-size:12px; color:var(--h-gray-500); line-height:1.5; margin-top:4px; flex:1; }
.v4-h-card-note{ font-size:11px; color:var(--h-gray-400); line-height:1.45; margin-top:6px; }
.v4-h-card-flow{ font-size:11px; color:var(--h-gray-500); margin-top:8px; }
.v4-h-card-foot{
  margin-top:12px; display:flex; align-items:center;
  justify-content:space-between; gap:8px;
}
.v4-h-price{ font-size:14px; font-weight:600; color:var(--h-gray-800); }
.v4-h-details-btn{
  font:inherit; font-size:11px; font-weight:600; color:var(--h-purple-700);
  background:none; border:0; padding:0; cursor:pointer; text-decoration:underline;
}
.v4-h-card--wide{ flex-direction:row; align-items:flex-start; gap:16px; }
.v4-h-card--wide .v4-h-card-body{ flex:1; min-width:0; }
.v4-h-card--wide .v4-h-card-title{ margin-top:0; }
.v4-h-card--wide .v4-h-card-foot{
  margin-top:0; flex-direction:column; align-items:flex-end; gap:8px;
}

.v4-h-check{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  border:2px solid var(--h-gray-300); background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; pointer-events:none;
}
.v4-h-check svg{ width:16px; height:16px; stroke-width:3; }
.is-selected .v4-h-check{
  background: var(--h-purple-600); border-color: var(--h-purple-600);
  box-shadow: var(--h-sh-md);
}
.is-awaiting .v4-h-check{ border-style:dashed; border-color: var(--h-purple-500); }
.is-disabled .v4-h-check{ opacity:.5; }

#v4-h-zona1 .v4-h-card-title{
  margin:0 0 4px;
  color:oklch(0.21 0.034 264.665);
  font-size:14px; font-weight:600; line-height:17.5px;
}
#v4-h-zona1 .v4-h-card-desc{
  margin:0;
  color:oklch(0.551 0.027 264.364);
  font-size:12px; font-weight:400; line-height:19.5px;
}
#v4-h-zona1 .v4-h-price{
  color:oklch(0.278 0.033 256.848);
  font-size:14px; font-weight:600; line-height:20px;
}
#v4-h-zona1 .v4-h-check{
  border-color:oklch(0.872 0.01 258.338);
  border-radius:9999px;
}
#v4-h-zona1 .v4-h-card.is-selected{
  border-color:oklch(0.627 0.265 303.9);
  box-shadow:0 1px 3px 0 oklch(0.946 0.033 307.174),
             0 1px 2px -1px oklch(0.946 0.033 307.174);
}
#v4-h-zona1 .v4-h-card.is-selected .v4-h-check{
  border-color:oklch(0.558 0.288 302.321);
  background:oklch(0.558 0.288 302.321);
  box-shadow:0 4px 6px -1px oklch(0.902 0.06 306.703),
             0 2px 4px -2px oklch(0.902 0.06 306.703);
}

.v4-h-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; border-radius:5px; padding:2px 6px;
  border:1px solid transparent; white-space:nowrap;
}
.v4-h-badge--soon{
  border-radius:4px;
  background:oklch(0.954 0.038 75.164);
  color:oklch(0.646 0.222 41.116);
  border-color:oklch(0.901 0.076 70.697);
}
.v4-h-badge--exclusive{ background:var(--h-orange-100); color:var(--h-orange-600); border-color:var(--h-orange-200); }
/* T4.1b·C — «Comprobación gratis»: discreta y verde, al lado del precio. No
   compite con él: menor, sin negrita de titular y sin ocupar fila propia. */
.v4-h-badge--freecheck{
  background:oklch(0.962 0.044 156.743);
  color:oklch(0.527 0.154 150.069);
  border-color:oklch(0.925 0.084 155.995);
  font-size:9px; font-weight:600; letter-spacing:0.01em;
  /* En una tarjeta estrecha el texto largo de la mesa se salía de la columna:
     este badge SÍ parte en dos líneas, al contrario que los de estado. */
  white-space:normal; text-align:left; line-height:12px; max-width:100%;
}
/* El precio manda; el badge se sitúa debajo cuando no cabe al lado. */
.v4-h-price-cell{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 6px;
  min-width:0; max-width:100%;
}
.v4-h-card-foot > .v4-h-price-cell{ flex:1 1 auto; }
/* Zona 1 tiene alto fijo: el badge se parte AL LADO del precio en vez de
   caer debajo, y el pie conserva su única línea de 32 px. */
#v4-h-zona1 .v4-h-price-cell{ flex-wrap:nowrap; }
.v4-h-card--wide .v4-h-card-foot > .v4-h-price-cell{
  flex:0 1 auto; justify-content:flex-end;
}
.v4-h-variant .v4-h-badge--freecheck{ flex:0 0 auto; }
.v4-h-card-badges{ position:absolute; top:12px; right:12px; display:flex; gap:4px; }
.v4-h-card--wide .v4-h-card-badges{ position:static; }

.v4-h-variants{
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--h-gray-200);
  display:flex; flex-direction:column; gap:8px;
}

/* «Textos asociados» conserva su bifurcación obligatoria, pero la muestra
   como configuración anclada: no ocupa altura dentro de la fila compacta. */
#v4-h-zona1 .v4-h-variants{
  position:absolute;
  top:calc(100% + 8px);
  left:-2px;
  z-index:25;
  width:calc(100% + 4px);
  margin:0;
  padding:12px;
  border:1px solid var(--h-purple-100);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--h-sh-xl);
}
.v4-h-variants-q{ font-size:11px; font-weight:700; color:var(--h-gray-800); }

/* T5.2 (UI-16) — el MISMO bloque de elección manual, presentado como lo que es:
   una parada que espera un dato del usuario. No hay modal, ni toast, ni flujo
   alternativo; solo peso visual dentro del lenguaje ya existente —el tono de
   aviso naranja que la home usa en `Obligatorio` y en `.v4-h-hint`—. */
.v4-h-variants--ask{
  margin-top:4px; padding:12px 14px;
  border:1px solid var(--h-orange-500); border-top:1px solid var(--h-orange-500);
  border-radius: var(--h-r-lg);
  background: var(--h-orange-100);
  gap:6px;
}
.v4-h-variants--ask:focus{ outline:2px solid var(--h-orange-600); outline-offset:2px; }
.v4-h-variants--ask:focus:not(:focus-visible){ outline:none; }
.v4-h-variants--ask .v4-h-variants-q{
  display:flex; align-items:center; gap:8px;
  font-size:13px; line-height:18px; color:#c2410c;
}
.v4-h-variants--ask .v4-h-variants-q svg{ width:16px; height:16px; flex:0 0 16px; }
.v4-h-variants-note{ font-size:12px; line-height:17px; color: var(--h-gray-800); }
.v4-h-variants--ask .v4-h-variant{ font-size:13px; }
.v4-h-variant{
  display:flex; align-items:center; gap:8px; font-size:12px;
  color:var(--h-gray-800); cursor:pointer;
}
.v4-h-variant input{ accent-color: var(--h-purple-600); }
.v4-h-variant.is-disabled{ color:var(--h-gray-400); cursor:not-allowed; }
.v4-h-variant-price{ margin-left:auto; font-size:11px; color:var(--h-gray-500); }
.v4-h-hint{ font-size:11px; color:var(--h-orange-600); margin-top:6px; }

/* ── Selector de tipo de fuente ─────────────────────────────── */
.v4-h-sources{ display:flex; flex-wrap:wrap; gap:8px; }
.v4-h-source{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:2px solid var(--h-gray-200); border-radius: var(--h-r-xl);
  background:#fff; color:var(--h-gray-500); font:inherit; font-size:14px;
  font-weight:500; cursor:pointer;
}
.v4-h-source:hover{ border-color: var(--h-gray-300); }
/* Formato que una capacidad ya elegida no admite. La incompatibilidad se
   expresa aquí —no en la tarjeta de la capacidad—, y el `title` dice quién. */
.v4-h-source.is-disabled{
  opacity:.45; cursor:not-allowed; pointer-events:none;
  text-decoration:line-through; text-decoration-thickness:1px;
}
.v4-h-source.is-active{
  border-color: var(--h-purple-500); background: var(--h-purple-50);
  color: var(--h-gray-900);
}
.v4-h-mark{
  width:24px; height:24px; border-radius:5px; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; letter-spacing:-.02em;
}
.v4-h-mark--indd{ background: var(--h-indd); }
.v4-h-mark--blue{ background: var(--h-blue-700); }
.v4-h-mark--navy{ background:#1a2e5a; }
.v4-h-mark--gray{ background:#6b7280; font-size:9px; }
.v4-h-mark--slate{ background:#374151; font-size:9px; }

/* ── Recorridos ────────────────────────────────────────────── */
.v4-h-routes-wrap{ display:flex; gap:16px; align-items:flex-start; }
/* T5.2 (UI-02) — los tres recorridos son la división principal de la zona 2 y
   sus encabezados competían con la masa de tarjetas: más cuerpo, más peso y
   más aire entre recorridos. Sin cajas, sin números y sin pasos de asistente:
   la arquitectura de la home no cambia. */
.v4-h-routes{ flex:1; min-width:0; display:flex; flex-direction:column; gap:28px; }
.v4-h-route-title{ font-size:16px; font-weight:800; line-height:22px; color: var(--h-purple-700); }
.v4-h-route-intro{ font-size:12px; color: var(--h-gray-500); margin-top:3px; margin-bottom:14px; }
.v4-h-subgroups{ display:flex; gap:16px; align-items:flex-start; }
/* CORRECCIÓN — colapso de la zona 2.
   Causa raíz: un `.v4-h-subgroup` sin `flex-basis` propio se dimensiona por
   contenido (`flex:0 1 auto`). Cuando ese contenido es un `.v4-h-grid` con
   columnas `fr` fijas, el navegador resuelve las `fr` como pistas `auto` para
   el cálculo de tamaño intrínseco: una pista real más tres pistas vacías dan
   un ancho mínimo absurdo, y ese ancho —no un ancho definido— es lo que el
   grid interno reparte. El síntoma es el mismo tanto si el subgrupo es la
   única sección de un recorrido (India online, mesa) como si comparte fila
   con otro (diagnóstico + acciones): en ambos casos falta un `flex-basis`
   definido que le dé al grid hijo un contenedor con ancho real.
   Arreglo: todo `.v4-h-subgroup` recibe un `flex-basis` EXPLÍCITO, distinto
   según su posición estructural, nunca calculado por su contenido:
     - único hijo (importación online, mesa editorial) → ocupa toda la fila;
     - primero de dos (diagnóstico) → ancho fijo de una tarjeta legible;
     - segundo de dos (acciones de recuperación) → crece con el resto. */
.v4-h-subgroup{ min-width:0; }
.v4-h-subgroup:only-child{ flex:1 1 0; }
.v4-h-subgroup:first-child:not(:last-child){ flex:0 0 240px; }
.v4-h-subgroup + .v4-h-subgroup{
  border-left:1px solid var(--h-gray-200); padding-left:16px; flex:1 1 0;
}
.v4-h-subgroup-label{
  font-size:11px; font-weight:600; color: var(--h-gray-400); margin-bottom:8px;
}
/* La rejilla de los recorridos tiene 1, 3 o 4 tarjetas según la sección:
   columnas `fr` fijas (las de la zona 1, sin tocar aquí) dejan pistas vacías
   que rompen el cálculo de ancho intrínseco (ver nota de `.v4-h-subgroup`).
   `auto-fit` crea solo las columnas que caben de verdad, con un mínimo
   legible, y no depende de cuántas tarjetas haya. Ámbito exclusivo de la
   zona 2: la rejilla de la zona 1 conserva su regla y sus puntos de corte. */
[data-h-routes] .v4-h-grid{ grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); }
.v4-h-help{
  width:208px; flex:0 0 208px;
  border:1px solid var(--h-gray-200); border-radius: var(--h-r-xl);
  background: var(--h-gray-50); padding:16px;
}
.v4-h-help h3{ font-size:14px; font-weight:700; color: var(--h-purple-700); margin-bottom:12px; }
.v4-h-help-item{ display:flex; gap:6px; margin-bottom:12px; }
.v4-h-help-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:0 0 8px; }
.v4-h-help-dot--indd{ background:rgba(73,2,31,.5); }
.v4-h-help-dot--purple{ background:var(--h-purple-500); }
.v4-h-help-dot--indigo{ background:var(--h-indigo-400); }
.v4-h-help-item b{ display:block; font-size:12px; color:var(--h-gray-800); }
.v4-h-help-item span{ font-size:12px; color:var(--h-gray-500); line-height:1.45; }

/* Zona 2: traducción directa de las proporciones del bloque Phase 2 del
   export de Figma. La información funcional adicional se conserva, pero no
   altera las filas base ni desplaza las rutas siguientes. */
#v4-h-zona2 .v4-h-source{
  border-radius:14px;
  line-height:20px;
}
#v4-h-zona2 .v4-h-source > .v4-h-badge--soon{
  position:absolute;
  z-index:2;
  top:-7px;
  right:-6px;
  padding:1px 4px;
  border-radius:4px;
  font-size:8px;
  line-height:12px;
  box-shadow:0 0 0 2px #fff;
}
#v4-h-zona2 .v4-h-mark{ border-radius:4px; }

#v4-h-zona2 .v4-h-route-title{
  font-size:16px;
  font-weight:800;
  line-height:22px;
}
#v4-h-zona2 .v4-h-route-intro{
  margin:3px 0 14px;
  font-size:12px;
  line-height:16px;
}

#v4-h-zona2 .v4-h-card{
  border-radius:14px;
  border-color:oklch(0.928 0.006 264.531);
}
#v4-h-zona2 .v4-h-card.is-selected{
  border-color:oklch(0.627 0.265 303.9);
  box-shadow:0 1px 3px 0 oklch(0.946 0.033 307.174),
             0 1px 2px -1px oklch(0.946 0.033 307.174);
}
#v4-h-zona2 .v4-h-card.is-selected .v4-h-check{
  border-color:var(--h-purple-600);
  background:var(--h-purple-600);
  box-shadow:0 4px 6px -1px var(--h-purple-100),
             0 2px 4px -2px var(--h-purple-100);
}
#v4-h-zona2 .v4-h-card-title{
  margin:0 0 4px;
  color:oklch(0.21 0.034 264.665);
  font-size:14px;
  font-weight:600;
  line-height:17.5px;
}
#v4-h-zona2 .v4-h-card-desc{
  margin:0;
  color:oklch(0.551 0.027 264.364);
  font-size:12px;
  line-height:19.5px;
}
#v4-h-zona2 .v4-h-price{
  color:oklch(0.278 0.033 256.848);
  font-size:14px;
  line-height:20px;
}
#v4-h-zona2 .v4-h-check{ border-color:oklch(0.872 0.01 258.338); }

#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroups{
  position:relative;
  display:grid;
  grid-template-columns:calc((100% - 36px) / 4) minmax(0,1fr);
  gap:12px;
  align-items:start;
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroups::before{
  content:"";
  position:absolute;
  z-index:0;
  top:12px;
  right:0;
  left:0;
  border-top:1px dashed var(--h-gray-300);
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup{
  min-width:0;
  width:auto;
  padding:0;
  border:0;
  flex:none;
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup-label{
  position:relative;
  z-index:1;
  display:flex;
  width:max-content;
  height:24px;
  max-width:100%;
  align-items:center;
  margin:0 0 12px;
  padding:0 12px;
  background:#fff;
  color:var(--h-gray-400);
  font-size:11px;
  font-weight:500;
  line-height:16px;
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup:first-child .v4-h-grid{
  grid-template-columns:minmax(0,1fr);
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup:last-child .v4-h-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
/* 241 px es la altura BASE de la fila, no un techo. Con alto fijo, el
   desplegable «Ver niveles superiores de reparación» —que solo existe en la
   tarjeta seleccionada— se salía del cuerpo y se montaba sobre el pie: el
   enlace llegaba a rozar el precio y su badge (T4.1b·C). La rejilla iguala la
   fila, así que crecer no la descuadra, y el orden queda como debe ser:
   contenido → niveles → zona comercial → selector. */
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card{
  min-height:241px;
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card > .v4-h-ico{
  width:36px;
  height:36px;
  flex-basis:36px;
  margin-bottom:8px;
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card-body{
  display:flex;
  min-height:0;
  flex:1 1 auto;
  flex-direction:column;
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card-title{
  padding-right:56px;
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card-desc{ flex:1 1 auto; }
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-details-btn{
  position:absolute;
  z-index:2;
  right:14px;
  bottom:56px;
  padding:2px 4px;
  border-radius:4px;
  background:rgba(255,255,255,.96);
  opacity:0;
  transition:opacity .15s ease;
}
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card:hover .v4-h-details-btn,
#v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card:focus-within .v4-h-details-btn{
  opacity:1;
}

#v4-h-zona2 .v4-h-card--wide{
  align-items:flex-start;
  gap:16px;
}
/* T5.2 (PROD-01) — la marca del programa en la tarjeta de importación online.
   Sustituye al glifo fijo `Id`: hereda el color de su caja (`.v4-h-ico--*`),
   así que sirve igual para «Id», «W» o «Fm» sin una regla por programa. */
#v4-h-zona2 .v4-h-app-glyph{
  font-size:14px;
  font-weight:900;
  line-height:20px;
}
/* Tono de FrameMaker: el único de los tres que la paleta de iconos no tenía.
   Mismo valor que su marca en el selector de fuente (`.v4-h-mark--navy`). */
.v4-h-ico--navy{ background:rgba(26,46,90,.10); color:#1a2e5a; }
#v4-h-zona2 [data-h-route="native_online"] .v4-h-card--wide{ height:102.333px; }
#v4-h-zona2 [data-h-route="workspace"] .v4-h-card--wide{ height:120px; }
#v4-h-zona2 .v4-h-card--wide .v4-h-card-title-row{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
}
#v4-h-zona2 .v4-h-card--wide .v4-h-card-title{
  min-width:0;
  margin:0;
}
#v4-h-zona2 [data-h-route="native_online"] .v4-h-card-title{ font-weight:700; }
#v4-h-zona2 .v4-h-card--wide .v4-h-card-badges{
  position:static;
  flex:0 0 auto;
}
#v4-h-zona2 .v4-h-card--wide .v4-h-card-desc{ margin-top:0; }
#v4-h-zona2 .v4-h-card--wide .v4-h-details-btn{
  display:block;
  width:max-content;
  margin-top:6px;
  line-height:16.5px;
}
#v4-h-zona2 [data-h-route="native_online"] .v4-h-card-foot{
  width:32px;
  height:32px;
  align-self:center;
}
#v4-h-zona2 [data-h-route="native_online"] .v4-h-price{
  position:absolute;
  top:16px;
  right:60px;
  color:var(--h-gray-500);
  font-size:11px;
  font-weight:500;
  line-height:16px;
}
#v4-h-zona2 [data-h-route="workspace"] .v4-h-price{
  font-size:12px;
  line-height:18px;
}
#v4-h-zona2 [data-h-route="workspace"] .v4-h-card-body{
  display:flex;
  align-self:stretch;
  flex-direction:column;
}
#v4-h-zona2 [data-h-route="workspace"] .v4-h-details-btn{ margin-top:auto; }

#v4-h-zona2 .v4-h-help h3{
  margin-bottom:12px;
  line-height:20px;
}
#v4-h-zona2 .v4-h-help-item{ margin-bottom:12px; }
#v4-h-zona2 .v4-h-help-item:last-child{ margin-bottom:0; }
#v4-h-zona2 .v4-h-help-item b{
  font-weight:600;
  line-height:16px;
}
/* T5.2 (COMPAT-03) — el recorte a un número fijo de líneas por POSICIÓN deja
   de tener sentido: el contenido de la caja depende del tipo de fuente, cambia
   de longitud con él y ya venía cortando la explicación a media frase. La caja
   crece con su texto; la columna de recorridos no se mueve, porque la fila
   alinea por arriba (`.v4-h-routes-wrap { align-items: flex-start }`). */
#v4-h-zona2 .v4-h-help-item > div > span{
  display:block;
  line-height:19.5px;
}

/* ── Punto de montaje de la mesa (D62) ──────────────────────── */
.v4-h-mesa-slot{ border-radius: var(--h-r-2xl); }
.v4-h-mesa-slot[hidden]{ display:none; }

/* ── T3.4 · Workspace inmersivo (D75) ───────────────────────────────────────
   El marco de la mesa deja de tener alto propio: lo hereda del hueco flexible
   que le deja la barra. Alto en `dvh` y NO en `vh`: en móvil la barra del
   navegador falsea `vh` y reaparecería el scroll general de la home, que es
   justo lo que este modo elimina.
   `--h-header-h` la escribe `main-home.js` midiendo el header real; el valor
   de aquí es solo la reserva por si el script no ha corrido todavía. */
.v4-h-home{ --h-header-h:53px; }

.v4-h-mesa-frame{
  display:block; width:100%; height:100%;
  border:0; border-radius: var(--h-r-2xl); background:#fff;
}
.v4-h-ws{
  display:flex; flex-direction:column; height:100%;
  border-radius: var(--h-r-2xl); overflow:hidden;
  background: var(--h-ink); box-shadow: var(--h-sh-xl);
}
.v4-h-ws-bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 16px; background: var(--h-ink-head);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.v4-h-ws-title{
  font-size:13px; font-weight:800; letter-spacing:.04em; color:rgba(255,255,255,.9);
}
.v4-h-ws-state{ font-size:12px; color:rgba(255,255,255,.6); }
/* Aplicado no puede leerse igual que «Preparando la mesa…»: es el único aviso
   de que el entregable ya existe, y el usuario todavía está mirando la mesa. */
.v4-h-ws-state--done{ color: var(--h-green-300); font-weight:600; }
.v4-h-ws-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.v4-h-btn-ghost{
  border:1px solid rgba(255,255,255,.25); border-radius:999px;
  padding:6px 14px; background:transparent; color:#fff;
  font: inherit; font-size:12px; font-weight:600; cursor:pointer;
}
.v4-h-btn-ghost:hover{ background:rgba(255,255,255,.12); }
/* Los dos controles de la barra son SIMÉTRICOS: mismo alto, mismo ancho y una
   sola línea. Sin ancho común y sin `nowrap`, «Salir de pantalla completa» se
   partía en tres líneas y estiraba la barra entera, y los dos botones acababan
   con tamaños distintos (validación manual de T3.4). */
.v4-h-ws-actions .v4-h-btn-ghost{
  min-width:158px; height:28px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; font-size:11px; line-height:1;
}
/* El descendiente es OBLIGATORIO: la regla base `.v4-h-cta` está más abajo en
   esta misma hoja y, a igual especificidad, ganaba —«Aplicar al documento»
   volvía a 16 px de relleno y de tipo, y se partía en dos líneas dentro de una
   barra de 28 px—. */
.v4-h-ws-actions .v4-h-cta--ws{
  width:auto; height:28px; min-height:0; padding:0 18px;
  font-size:12px; line-height:1; white-space:nowrap;
}
.v4-h-cta--ws[hidden]{ display:none; }
@media (max-width:639px){
  /* T5.3 — los tres mandos (158+158+161 px) no caben en una fila de 375 px y
     «Aplicar al documento», el mando principal, quedaba fuera de pantalla:
     los mandos envuelven y el CTA pasa a fila completa. */
  .v4-h-ws-actions{ flex-wrap:wrap; margin-left:0; width:100%; }
  .v4-h-ws-actions .v4-h-btn-ghost{ min-width:0; flex:1 1 auto; }
  .v4-h-ws-actions .v4-h-cta--ws{ flex:1 1 100%; }
}
.v4-h-ws-frame{ flex:1 1 auto; min-height:0; background:#fff; }

/* El sándwich es un REPARTO, no una superposición. Con la mesa abierta la home
   deja de ser una columna que crece y pasa a ser una caja de alto conocido que
   se reparte entre sus piezas: tiras de contexto arriba, workspace en medio,
   «Tu proceso editorial» abajo. Cada una ocupa SU espacio.

   La versión anterior daba al slot `position:sticky` con
   `height: calc(100dvh - header)`: el workspace se comía el viewport entero y
   la franja de proceso, al ser un hermano posicionado más abajo, acababa
   pintándose ENCIMA de los visores, del fuente y de la Consola. No se arregla
   con `z-index` —eso solo escondería una pieza debajo de otra—: se arregla
   quitando el `sticky` y repartiendo el alto. */
.v4-h-home.v4-h-mesa-open{
  height: calc(100dvh - var(--h-header-h));
  overflow: hidden;              /* la página deja de tener scroll general */
  gap: 6px;
  padding-top: 6px; padding-bottom: 6px;
}
/* La separación normal de la home la fija `.v4-home-page .v4-home{gap:32px
   !important}`, que sin esta línea ganaba también con la mesa abierta: 32 px
   ×3 de aire muerto entre tiras que los visores no recibían. Se recupera el
   `!important` con más especificidad y solo mientras dura el modo expandido. */
.v4-home-page .v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed){ gap:6px !important; }
/* El contenedor de página reserva 80 px de aire al pie: con la mesa abierta eso
   basta para que la ventana siga teniendo scroll aunque la home ya mida exacto.
   Se retira mientras dura el workspace EXPANDIDO.
   El `:not(.v4-h-mesa-collapsed)` no es adorno: `.v4-home-page` ES el `body`, y
   dejar aquí `overflow:hidden` con la mesa viva pero contraída atrapaba la home
   entera sin scroll vertical —hero, cápsulas, proceso y resultado
   inalcanzables— aunque la propia home ya hubiera recuperado `height:auto`.
   Contraer conserva el iframe y el estado; NO conserva el bloqueo de viewport
   del modo expandido. */
.v4-home-page:has(.v4-h-mesa-open:not(.v4-h-mesa-collapsed)) .v4-wrap{ padding-bottom:0; }
.v4-home-page:has(.v4-h-mesa-open:not(.v4-h-mesa-collapsed)){ overflow:hidden; }
.v4-h-home.v4-h-mesa-open .v4-h-mesa-slot{
  flex: 1 1 auto; min-height: 0;  /* el workspace consume EL RESTO */
  position: static;
}
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-hero{ display:none; }

/* ── Tiras de contexto ──────────────────────────────────────────────────────
   Presentes y legibles, pero sin robar altura a los visores. La versión
   anterior recortaba la SECCIÓN entera con `max-height:28px`: eso partía por la
   mitad el número de zona, el título y la cabecera del proceso —contenido real
   aplastado, no resumido—.
   Se corrige al revés: se OCULTA el cuerpo que no aporta contexto y la línea
   que queda conserva alto e interlineado naturales. Nada se escala ni se corta
   a media letra. */
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-zone,
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-process{
  flex:0 0 auto; opacity:.55;
}
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-zone{ padding:6px 20px; gap:0; }
/* De la zona solo sobrevive su cabecera: ni tarjetas, ni selector de fuente, ni
   ayuda. Con la mesa expandida no se trabaja ahí —queda `inert`—. */
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-zone > :not(.v4-h-zone-head){
  display:none;
}
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-zone-head{ min-height:0; }
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-zone-head p{ display:none; }
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-zone-head h2{
  font-size:14px; line-height:22px;
}
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-zone-num{
  width:22px; height:22px; flex:0 0 22px;
  font-size:12px; line-height:22px; box-shadow:none;
}
/* «Tu proceso editorial»: cabecera con objetivo, estado y operación. La cadena,
   el precio, los mensajes y la confirmación de procedencia se leen al volver. */
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-process > :not(.v4-h-process-head){
  display:none;
}
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-process-head{ padding:6px 20px; }
/* «Sube los archivos» y su CTA no aportan contexto con la mesa abierta —están
   inertes— y el resultado se lee al volver al proceso. Fuera del reparto: es la
   tira que se sacrifica antes que el marco. */
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-bottom,
.v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) [data-h-run]{ display:none; }
/* T5.2 (UX-17) — el pie de página (UI-04) mide 149 px y vive FUERA de la home,
   así que el sándwich seguía midiendo exacto pero el DOCUMENTO no: con
   `overflow:hidden` en `.v4-home-page` el desplazamiento que traía la página
   quedaba congelado y la barra de la mesa —«Aplicar al documento», «Contraer
   mesa»— se quedaba por encima del borde superior de la ventana, sin forma de
   volver a subir. El pie no aporta nada mientras se trabaja en la mesa: sale
   del reparto, como ya salían la zona de archivos y el bloque de resultado. */
.v4-home-page:has(.v4-h-mesa-open:not(.v4-h-mesa-collapsed)) .v4-h-foot{ display:none; }

/* Contraer es SOLO visual (D75): el marco se queda montado con alto 0 y el
   documento del iframe intacto. `display:none` descartaría en algunos
   navegadores el contexto de composición y el visor de PDF tendría que
   repintarse desde cero.
   Todo lo demás del modo expandido queda excluido por `:not(...)` arriba, no
   deshecho regla por regla: contraer devuelve una home NORMAL de una vez. */
.v4-h-home.v4-h-mesa-collapsed{
  height:auto; overflow:visible; gap:32px;
  padding-top:32px; padding-bottom:0;
}
.v4-h-home.v4-h-mesa-collapsed .v4-h-mesa-slot{ flex:0 0 auto; height:auto; position:static; }
.v4-h-home.v4-h-mesa-collapsed .v4-h-ws-frame{ height:0; min-height:0; overflow:hidden; }

/* Pantalla completa real: el elemento a pantalla completa es el workspace
   entero —barra incluida—, así que contraer, aplicar y volver siguen
   alcanzables. Lo pide la home, nunca el iframe. */
.v4-h-home.v4-h-ws-fs .v4-h-ws{ height:100dvh; border-radius:0; }

/* A 375 px el sándwich no cabe: se sacrifica la tira inferior antes que el
   marco. Prioridad de la tarea: los dos visores. */
@media (max-width: 480px){
  .v4-h-home.v4-h-mesa-open:not(.v4-h-mesa-collapsed) .v4-h-zone{ display:none; }
}

/* ── Tu proceso editorial ───────────────────────────────────── */
.v4-h-process{
  border-radius: var(--h-r-2xl); overflow:hidden;
  background: var(--h-ink); color:#fff; box-shadow: var(--h-sh-xl);
}
.v4-h-process-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:12px 20px; background: var(--h-ink-head);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.v4-h-process-title{
  font-size:13px; font-weight:800; letter-spacing:.04em; color:rgba(255,255,255,.9);
  display:inline-flex; align-items:center; gap:8px;
}
.v4-h-process-title svg{ width:16px; height:16px; color: var(--h-yellow-300); }
.v4-h-process-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; color:rgba(255,255,255,.6);
}
.v4-h-process-meta b{ color:#fff; font-weight:500; }
.v4-h-state{
  display:inline-flex; align-items:center; gap:4px; border-radius:999px;
  padding:2px 10px; font-size:12px; font-weight:600; border:1px solid transparent;
}
.v4-h-state svg{ width:11px; height:11px; }
.v4-h-state--ready{ background:rgba(34,197,94,.2); color:var(--h-green-300); border-color:rgba(34,197,94,.3); }
.v4-h-state--configuring{ background:rgba(250,204,21,.2); color:var(--h-yellow-300); border-color:rgba(250,204,21,.3); }
.v4-h-state--empty{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); }
.v4-h-state--blocked-product{ background:rgba(248,113,113,.2); color:#fca5a5; border-color:rgba(248,113,113,.3); }
.v4-h-state--blocked-integration,
.v4-h-state--blocked-soon{ background:rgba(251,146,60,.2); color:#fdba74; border-color:rgba(251,146,60,.3); }

.v4-h-process-body{ display:grid; grid-template-columns:1fr; }
.v4-h-process-flow{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.v4-h-process-price{ padding:20px; border-top:1px solid rgba(255,255,255,.1); }
.v4-h-sub{
  font-size:11px; font-weight:600; letter-spacing:.12em;
  color:rgba(255,255,255,.5); text-transform:uppercase;
}
.v4-h-empty{ font-size:14px; color:rgba(255,255,255,.55); font-style:italic; max-width:60ch; }
.v4-h-stage-label{
  font-size:10px; font-weight:600; letter-spacing:.1em;
  color:rgba(255,255,255,.45); margin-top:4px;
}
.v4-h-chain{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.v4-h-unit{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1);
  border-radius: var(--h-r-xl); padding:10px 12px;
}
.v4-h-unit-title{ font-size:12px; font-weight:600; color:#fff; line-height:1.2; }
.v4-h-unit-price{ font-size:10px; color:rgba(255,255,255,.5); }
.v4-h-unit-steps{ font-size:10px; color:rgba(255,255,255,.4); }
.v4-h-unit-modifier{ font-size:10px; color:rgba(255,255,255,.55); margin-top:2px; }
.v4-h-arrow{ color:rgba(255,255,255,.3); display:inline-flex; }
.v4-h-arrow svg{ width:14px; height:14px; }
.v4-h-result{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(34,197,94,.2); border:1px solid rgba(34,197,94,.3);
  border-radius: var(--h-r-xl); padding:10px 12px;
}
.v4-h-result b{ font-size:12px; color: var(--h-green-300); display:block; }
.v4-h-result span{ font-size:10px; color:#bbf7d0; }
.v4-h-route-line{ font-size:11px; color:rgba(255,255,255,.4); }
.v4-h-price-row{
  display:flex; justify-content:space-between; gap:16px;
  font-size:14px; color:rgba(255,255,255,.7); padding:3px 0;
}
.v4-h-price-row--discount{ color: var(--h-green-300); }
/* T4.1b·C — la fila que dice qué es gratis. Verde, el mismo código de color
   que el badge de la tarjeta y que el descuento: ventaja, no cargo. */
.v4-h-price-row--free{ color: var(--h-green-300); font-weight:700; }
.v4-h-price-row--total{
  border-top:1px solid rgba(255,255,255,.1); margin-top:8px; padding-top:10px;
  font-size:18px; font-weight:800; color:#fff;
}
.v4-h-price-note{
  display:flex; gap:6px; margin-top:10px;
  font-size:10px; color:rgba(255,255,255,.4);
}
.v4-h-price-note svg{ width:11px; height:11px; color: var(--h-green-500); flex:0 0 11px; }
.v4-h-process-msgs{
  padding:0 20px 20px; display:flex; flex-direction:column; gap:8px;
}
.v4-h-msg{
  display:flex; gap:8px; border-radius: var(--h-r-lg); padding:10px 12px;
  font-size:12px; line-height:1.5;
}
.v4-h-msg svg{ width:14px; height:14px; flex:0 0 14px; margin-top:2px; }
.v4-h-msg--product{ background:rgba(248,113,113,.14); color:#fecaca; }
.v4-h-msg--temporary{ background:rgba(251,146,60,.14); color:#fed7aa; }
.v4-h-msg--ok{ background:rgba(34,197,94,.14); color:var(--h-green-300); }
.v4-h-msg-hint{ display:block; opacity:.75; margin-top:2px; }

/* ── Archivos · resultados · acción ─────────────────────────── */
.v4-h-bottom{
  display:grid; grid-template-columns:1fr;
  border:1px solid var(--h-gray-200); border-radius: var(--h-r-2xl);
  background:#fff; box-shadow: var(--h-sh-sm); overflow:hidden;
}
.v4-h-bottom-col{ padding:20px; display:flex; flex-direction:column; gap:12px; }
.v4-h-bottom-col + .v4-h-bottom-col{ border-top:1px solid var(--h-gray-200); }
.v4-h-bottom h3{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--h-gray-500);
}
.v4-h-uploader{
  display:flex; align-items:center; gap:12px; width:100%;
  border:2px dashed var(--h-gray-200); border-radius: var(--h-r-xl);
  background: var(--h-gray-50); padding:12px; cursor:pointer;
  font:inherit; text-align:left;
}
.v4-h-uploader:hover{ border-color: var(--h-purple-500); }
.v4-h-uploader.is-done{ border-style:solid; border-color: var(--h-green-500); background:#f0fdf4; }
.v4-h-uploader b{ display:block; font-size:14px; font-weight:600; color: var(--h-gray-800); }
.v4-h-uploader span{ display:block; font-size:12px; color: var(--h-gray-400); }
.v4-h-uploader em{ display:block; font-size:10px; font-style:normal; font-weight:500; color: var(--h-orange-500); }
.v4-h-outputs{ display:flex; flex-direction:column; gap:8px; }
.v4-h-outputs li{ display:flex; gap:8px; font-size:14px; color:#374151; }
.v4-h-outputs svg{ width:15px; height:15px; flex:0 0 15px; margin-top:3px; color: var(--h-green-500); }
.v4-h-endpoint{
  position:relative;
  padding-left:23px;
  color:#374151;
  font-size:14px;
  line-height:20px;
}
.v4-h-endpoint:not(:empty)::before{
  content:"✓";
  position:absolute;
  top:0;
  left:0;
  color:var(--h-green-500);
  font-size:15px;
  font-weight:800;
  line-height:20px;
}
.v4-h-note{ display:flex; gap:6px; font-size:10px; color: var(--h-gray-400); }
.v4-h-note svg{ width:11px; height:11px; flex:0 0 11px; }
.v4-h-cta{
  width:100%; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:16px; border:0; border-radius: var(--h-r-xl);
  background: var(--h-ink); color:#fff; font:inherit; font-size:16px;
  font-weight:700; cursor:pointer; box-shadow: var(--h-sh-md);
}
.v4-h-cta:hover:not(:disabled){ background:#3d2a8a; }
.v4-h-cta:disabled{ background: var(--h-gray-200); color: var(--h-gray-400); cursor:not-allowed; box-shadow:none; }
.v4-h-cta svg{ width:18px; height:18px; }
.v4-h-cta-detail{ font-size:11px; color: var(--h-gray-400); }

/* ── Panel de detalle ───────────────────────────────────────── */
.v4-h-scrim{
  position:fixed; inset:0; background:rgba(17,24,39,.35); z-index:55;
}
.v4-h-scrim[hidden]{ display:none; }
.v4-h-panel{
  position:fixed; top:0; bottom:0; right:0; width:min(460px,100%);
  background:#fff; z-index:60; box-shadow: var(--h-sh-xl);
  display:flex; flex-direction:column;
}
.v4-h-panel[hidden]{ display:none; }
.v4-h-panel-head{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--h-gray-200);
}
.v4-h-panel-head h2{ font-size:18px; font-weight:700; flex:1; color: var(--h-gray-900); }
.v4-h-panel-close{
  border:0; background:none; cursor:pointer; color: var(--h-gray-500);
  display:inline-flex; padding:4px;
}
.v4-h-panel-close svg{ width:20px; height:20px; }
.v4-h-panel-body{ padding:20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:16px; }
.v4-h-panel-body h3{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--h-gray-400); margin-bottom:6px;
}
.v4-h-panel-body p, .v4-h-panel-body li{ font-size:14px; color: var(--h-gray-800); line-height:1.55; }
.v4-h-panel-body ul{ display:flex; flex-direction:column; gap:6px; padding-left:18px; list-style:disc; }
.v4-h-panel-foot{
  padding:16px 20px; border-top:1px solid var(--h-gray-200);
  display:flex; flex-direction:column; gap:10px;
}
.v4-h-panel-foot a{ font-size:13px; color: var(--h-purple-700); font-weight:600; }

/* ── Modal de cambio de fuente ──────────────────────────────── */
.v4-h-modal{
  position:fixed; inset:0; z-index:70; background:rgba(17,24,39,.45);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.v4-h-modal[hidden]{ display:none; }
.v4-h-modal-box{
  background:#fff; border-radius: var(--h-r-2xl); padding:24px;
  width:min(480px,100%); box-shadow: var(--h-sh-xl);
  display:flex; flex-direction:column; gap:12px;
}
.v4-h-modal-box h2{ font-size:18px; font-weight:700; color: var(--h-gray-900); }
.v4-h-modal-box ul{ padding-left:18px; list-style:disc; display:flex; flex-direction:column; gap:4px; }
.v4-h-modal-box li{ font-size:14px; color: var(--h-gray-800); }
.v4-h-modal-box p{ font-size:13px; color: var(--h-gray-500); }
.v4-h-modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.v4-h-modal-actions .v4-h-cta{ width:auto; padding:10px 18px; font-size:14px; }
.v4-h-btn-ghost{
  border:1px solid var(--h-gray-200); background:#fff; border-radius: var(--h-r-xl);
  padding:10px 18px; font:inherit; font-size:14px; font-weight:600;
  color: var(--h-gray-800); cursor:pointer;
}

/* ── Resumen de marcas en la cápsula (T3.2b/D72) ───────────────── */
/* T4.1b·C — El estado y su botón COMPARTEN fila. Apilados, el botón era el
   último hijo del cuerpo y el `overflow:hidden` de la tarjeta lo recortaba;
   en dos columnas, «Configurar marcas» deja de gastar alto propio y cabe en
   los 208 px de siempre, junto al precio y su badge. No se oculta ni se
   reduce nada: el texto conserva su tamaño. */
/* T5.2 (UI-08) — dos correcciones sobre la misma fila, sin tocar el
   configurador ni el reparto de alto de T4.1b·C:
   · fuera la línea gris, que caía justo encima del botón y se leía como un
     segundo borde suyo;
   · el botón pasa a la IZQUIERDA de la fila. Pegado al canto derecho competía
     con «Ver detalles», que aparece al hover ahí mismo; ahora cada uno ocupa
     un extremo y el hover no se solapa con nada. */
/* T5.2 (UI-11) — separación vertical clara respecto a la descripción: sin la
   línea gris, el botón quedaba pegado al copy y parecía parte de él. El hueco
   lateral que lo aparta de «Ver detalles» no se toca. */
.h-marks-summary{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; column-gap:8px; row-gap:0;
  margin-top:14px;
  min-height:0;                 /* encoge con el cuerpo; no empuja el pie */
}
.h-marks-summary-count,
.h-marks-summary-example,
.h-marks-summary-empty{ grid-column:2; }
.h-marks-summary .h-marks-configure-btn{
  grid-column:1; grid-row:1 / -1; align-self:center; justify-self:start;
}
.h-marks-summary-count{ font-size:12px; font-weight:700; color: var(--h-gray-800); }
.h-marks-summary-example{
  font-size:12px; color: var(--h-gray-500); font-family: monospace;
  overflow-wrap:anywhere;
  /* El ejemplo es un resumen, no el contrato: una línea basta y el detalle
     completo vive en el configurador. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;
  overflow:hidden;
}
.h-marks-summary-empty{ font-size:12px; color: var(--h-gray-500); }
/* Compacto, no ilegible: 12 px es el tamaño del resto de textos secundarios
   de la tarjeta, y los 6 px que devuelve son los que faltaban para que el
   cuerpo entero quepa en los 208 px de siempre. */
.h-marks-configure-btn{ align-self:flex-start; padding:3px 12px; font-size:12px; }

/* ── Configurador de marcas, prefijos y sufijos (T3.2b/D72) ────── */
.h-marks-box{ width:min(560px,100%); position:relative; }
/* Cierre del MODAL, no de una fila: esquina de la caja, glifo grande y con
   fondo propio, frente a la X pequeña y sin caja que borra una fila. */
.h-marks-close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--h-gray-200); border-radius:999px;
  background:#fff; color: var(--h-gray-500);
  font:inherit; font-size:20px; line-height:1; cursor:pointer;
}
.h-marks-close:hover{ background: var(--h-gray-50); color: var(--h-gray-900); }
.h-marks-close:focus-visible{ outline:2px solid var(--h-purple-500); outline-offset:2px; }
/* El título no se mete debajo del botón. */
.h-marks-box > h2{ padding-right:40px; }
.h-marks-box code{
  background: var(--h-gray-50); border-radius:4px; padding:1px 4px; font-size:12px;
}
#h-marks-rows{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; }
.h-marks-row{ display:flex; gap:8px; align-items:flex-end; }
.h-marks-field{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px;
  font-size:12px; color: var(--h-gray-500);
}
.h-marks-field input{
  border:1px solid var(--h-gray-200); border-radius: var(--h-r-lg, 10px);
  padding:8px 10px; font:inherit; font-size:13px; color: var(--h-gray-900);
  width:100%;
}
.h-marks-remove{
  border:0; background:transparent; color: var(--h-gray-400); cursor:pointer;
  padding:8px; flex:0 0 auto;
}
.h-marks-remove:hover{ color: var(--h-red-600); }
.h-marks-remove svg{ width:16px; height:16px; }
.h-marks-add-row{ display:flex; }
.h-marks-presets{ display:flex; flex-wrap:wrap; gap:8px; }
.h-marks-preset{
  border:1px solid var(--h-purple-100); background: var(--h-purple-50);
  color: var(--h-purple-700); border-radius:999px; padding:6px 12px;
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}
/* T5.2 (COPY-06) — el ejemplo es la pieza que hace entender el mecanismo, pero
   es apoyo del párrafo anterior: se lee un punto más pequeño, no como una
   segunda instrucción. */
.h-marks-example{ font-size:12px; color: var(--h-gray-500); line-height:1.55; }
.h-marks-soon{ font-size:12px; color: var(--h-gray-400); }
.h-marks-errors{ display:flex; flex-direction:column; gap:4px; }
.h-marks-error{ font-size:12px; color: var(--h-red-600); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width:640px){
  .v4-h-hero h1{ font-size:48px; }
  .v4-h-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* T5.3 — dos columnas hasta escritorio: a cuatro, entre 640 y 1023 px la
     tarjeta baja de ~165 px y el pie precio+badge+círculo no cabe. */
  #v4-h-zona1 .v4-h-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v4-h-bottom{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .v4-h-bottom-col + .v4-h-bottom-col{
    border-top:0; border-left:1px solid var(--h-gray-200);
  }
}
@media (min-width:1024px){
  .v4-h-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  #v4-h-zona1 .v4-h-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .v4-h-process-body{ grid-template-columns:2fr 1fr; }
  .v4-h-process-price{
    border-top:0; border-left:1px solid rgba(255,255,255,.1);
  }
}
@media (max-width:1023px){
  /* En columna, `align-items:flex-start` dimensionaría los hijos por su
     contenido y desbordaría el ancho de la pantalla. */
  .v4-h-routes-wrap{ flex-direction:column; align-items:stretch; }
  .v4-h-routes{ width:100%; }
  .v4-h-help{ width:100%; flex-basis:auto; }
  #v4-h-zona2 .v4-h-help{ display:none; }
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card{
    height:auto;
    min-height:260px;
  }
}
@media (max-width:767px){
  .v4-h-subgroups{ flex-direction:column; }
  .v4-h-subgroup{ width:100%; }
  .v4-h-subgroup + .v4-h-subgroup{
    border-left:0; padding-left:0; border-top:1px solid var(--h-gray-200); padding-top:12px;
  }
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroups{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroups::before{ display:none; }
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup{ width:100%; }
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup + .v4-h-subgroup{
    padding-top:0;
    border-top:0;
  }
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup-label{ padding:0; }
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup:last-child .v4-h-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  /* La tarjeta ancha se apila: en fila, su pie no cabe en 375 px. */
  .v4-h-card--wide{ flex-direction:column; }
  .v4-h-card--wide .v4-h-card-foot{
    margin-top:12px; flex-direction:row; align-items:center; justify-content:space-between;
  }
  .v4-h-card--wide .v4-h-card-badges{ margin-top:8px; }
  #v4-h-zona2 .v4-h-card--wide{
    height:auto !important;
    min-height:0;
    align-items:stretch;
  }
  #v4-h-zona2 .v4-h-zone-head > div:last-child{ min-width:0; }
  #v4-h-zona2 .v4-h-zone-head h2{ overflow-wrap:anywhere; }
  #v4-h-zona2 .v4-h-card--wide > .v4-h-ico{ align-self:flex-start; }
  #v4-h-zona2 .v4-h-card--wide .v4-h-card-body{
    width:100%;
    flex:none;
  }
  #v4-h-zona2 .v4-h-card--wide .v4-h-card-title-row{ flex-wrap:wrap; }
  #v4-h-zona2 .v4-h-card--wide .v4-h-card-foot,
  #v4-h-zona2 [data-h-route="native_online"] .v4-h-card-foot{
    width:100%;
    height:auto;
    align-self:stretch;
  }
  #v4-h-zona2 [data-h-route="native_online"] .v4-h-price{
    position:static;
    margin-right:auto;
    white-space:nowrap;
  }
  .v4-h-panel{ inset:0; width:100%; }
  .v4-h-summary{ font-size:12px; padding:6px 10px; }
  .v4-h-chain{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  /* T5.3 — la cápsula más larga desbordaba unos píxeles y obligaba a un
     microdesplazamiento: el título envuelve en vez de desplazar. */
  .v4-h-process-sequence .v4-h-unit{ max-width:100%; }
  .v4-h-process-sequence .v4-h-unit-title{ white-space:normal; }
  /* T5.3 — la cápsula «Resultado:» truncaba su lista de entregables. */
  .v4-h-process-sequence .v4-h-result{ max-width:100%; }
  .v4-h-process-sequence .v4-h-result b,
  .v4-h-process-sequence .v4-h-result span{ white-space:normal; }
  /* T5.3 — configurador de marcas: la plantilla necesita el ancho entero;
     baja a su propia línea bajo la marca. */
  .h-marks-row{ flex-wrap:wrap; align-items:center; }
  .h-marks-row .h-marks-field + .h-marks-field{ flex:1 1 100%; order:3; }
  /* T5.3 — informe: el `nowrap` del valor está pensado para cifras; un valor
     textual largo aplastaba la etiqueta y se salía de la caja. Si no cabe,
     baja entero a su propia línea. */
  .v4-h-run-facts li, .v4-h-run-counters li{ flex-wrap:wrap; }
  .v4-h-run-facts li span:last-child,
  .v4-h-run-counters li span:last-child{
    white-space:normal; text-align:right; min-width:0; max-width:100%;
  }
  /* T5.3 — objetivo táctil del quitar-trabajo (22 px era poco para el dedo). */
  .v4-h-job-remove{ padding:10px; }
}
@media (max-width:1023px){
  /* T5.3 — «Ver detalles» flotaba sobre el texto y solo aparecía con hover
     o al tocar la tarjeta (que además la selecciona); en móvil y tablet no
     hay hover: pasa al flujo, siempre visible. */
  #v4-h-zona1 .v4-h-details-btn,
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-details-btn{
    position:static;
    opacity:1;
    align-self:flex-start;
    padding:0;
    background:none;
    margin-top:2px;
  }
}
@media (min-width:640px) and (max-width:1023px){
  #v4-h-zona1 .v4-h-card{ height:auto; min-height:0; }
  #v4-h-zona1 .v4-h-card-desc{
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
  }
}

@media (max-width:900px){
  .v4-home-page .v4-header{
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px 18px !important;
  }
  .v4-home-page .v4-nav{
    order:3;
    width:100%;
    flex-wrap:wrap;
    gap:8px 16px;
  }
}

@media (max-width:767px){
  .v4-home-page .v4-header{ min-height:53px; }
  .v4-home-page .v4-nav{ display:none; }
}

@media (max-width:639px){
  .v4-h-home{ padding:32px 16px 0; }
  .v4-h-hero h1{ font-size:36px; line-height:45px; }
  #v4-h-zona1{ padding:20px; }
  #v4-h-zona1 .v4-h-card{ height:auto; min-height:0; }
  #v4-h-zona1 .v4-h-card-desc{
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
  }
  /* T5.3 — una sola columna: a dos columnas (~150 px) el pie
     precio+badge+círculo no cabe y el badge quedaba cortado bajo el
     control de selección. */
  #v4-h-zona1 .v4-h-grid{ grid-template-columns:1fr; }
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-subgroup:last-child .v4-h-grid{
    grid-template-columns:1fr;
  }
  /* El mínimo de 260 px (pensado para igualar la rejilla a dos columnas)
     solo sostenía espacio vacío con las tarjetas apiladas. */
  #v4-h-zona2 [data-h-route="rescue_local"] .v4-h-card{ min-height:0; }
}

/* ── Ajuste visual Figma · zona 3 ───────────────────────────── */
.v4-h-summary,
.v4-h-summary span{
  white-space:nowrap;
}
.v4-h-summary{
  flex:0 0 auto;
  gap:6px;
  padding:4px 12px;
  font-size:12px;
  line-height:18px;
}

.v4-h-process{ position:relative; }
.v4-h-process-head{
  flex-wrap:nowrap;
  box-sizing:border-box;
  height:46px;
  min-height:0;
}
.v4-h-process-title{
  font-size:14px;
  font-weight:900;
  line-height:20px;
  letter-spacing:.025em;
}
.v4-h-process-meta{
  flex-wrap:nowrap;
  line-height:16px;
}
.v4-h-process-flow{
  min-width:0;
  gap:12px;
}
.v4-h-sub{
  font-size:12px;
  line-height:16px;
  letter-spacing:.1em;
}
.v4-h-stage-legend{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* T5.2 (UI-12) — Con cinco o seis operaciones la secuencia se mantenía en UNA
   línea (`overflow:hidden` + `nowrap`) y las cápsulas se comprimían unas sobre
   otras. Ahora BAJA de fila: el bloque morado crece en alto, que es espacio que
   tiene, en vez de estrechar cápsulas que dejan de leerse. La tipografía y el
   tamaño de las cápsulas no cambian, el orden se conserva y las flechas siguen
   entre cápsula y cápsula, también al final de una fila. El resumen de precios
   de la derecha no se ve afectado: vive en otra celda de la rejilla. */
.v4-h-process-sequence{
  display:flex;
  flex-wrap:wrap;
  min-width:0;
  align-items:center;
  gap:8px;
  row-gap:10px;
}
.v4-h-unit,
.v4-h-result{
  min-width:0;
  min-height:51px;
  /* Sin encogerse: quien no cabe pasa a la fila siguiente. */
  flex:0 0 auto;
  border-radius:12px;
}
.v4-h-unit .v4-h-ico,
.v4-h-result .v4-h-ico{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:8px;
}
.v4-h-unit .v4-h-ico svg,
.v4-h-result .v4-h-ico svg{
  width:16px;
  height:16px;
}
.v4-h-unit > span:last-child,
.v4-h-result > span:last-child{
  min-width:0;
}
.v4-h-unit-title,
.v4-h-unit-price,
.v4-h-unit-steps,
.v4-h-result b,
.v4-h-result span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.v4-h-unit-title{
  max-width:120px;
  line-height:14.5px;
}
.v4-h-process-sequence > .v4-h-unit:not(:first-child) .v4-h-unit-title{
  max-width:102px;
}
.v4-h-result{
  gap:6px;
  padding-inline:10px;
  padding-block:9.5px;
}
.v4-h-result b{ line-height:14.5px; }
.v4-h-result > div{ line-height:14px; }
.v4-h-result > div > span{ line-height:14px; }
.v4-h-route-line{ line-height:16.5px; }

.v4-h-process-price{ position:relative; }
.v4-h-price-row{
  padding:0;
  line-height:20px;
}
.v4-h-price-row + .v4-h-price-row{ margin-top:8px; }
.v4-h-price-row--total{
  margin-top:8px;
  padding-top:8px;
  font-weight:900;
  line-height:27px;
}
.v4-h-price-note{
  margin-top:12px;
  line-height:15px;
}
/* T5.2 (COPY-07) — por qué se ha retirado la comprobación gratuita al encadenar
   operaciones. Toca al dinero, así que se lee: mismo bloque de notas, un punto
   más de contraste y el icono en neutro, no en el verde de garantía. Va después
   de `.v4-h-price-note` porque comparte especificidad con él. */
.v4-h-price-note--withdrawn{ margin-top:6px; color:rgba(255,255,255,.62); }
.v4-h-price-note--withdrawn svg{ color:rgba(255,255,255,.62); }
.v4-h-price-breakdown{
  position:absolute;
  z-index:4;
  top:18px;
  right:20px;
}
.v4-h-price-breakdown summary{
  width:24px;
  height:16px;
  overflow:hidden;
  color:rgba(255,255,255,.45);
  cursor:pointer;
  list-style:none;
  opacity:0;
  text-align:right;
  transition:opacity .15s ease;
}
.v4-h-process-price:hover .v4-h-price-breakdown summary,
.v4-h-price-breakdown summary:focus-visible,
.v4-h-price-breakdown[open] summary{ opacity:1; }
.v4-h-price-breakdown summary::-webkit-details-marker{ display:none; }
.v4-h-price-breakdown summary::after{
  content:"•••";
  font-size:10px;
  line-height:16px;
  letter-spacing:1px;
}
.v4-h-price-breakdown-popover{
  position:absolute;
  top:22px;
  right:0;
  width:328px;
  padding:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:var(--h-ink-head);
  box-shadow:var(--h-sh-xl);
}
.v4-h-price-breakdown-popover .v4-h-price-row{
  font-size:12px;
  line-height:18px;
}

.v4-h-process-msgs{
  gap:6px;
}
/* T5.2 (UI-15) — sin mensajes, la franja no ocupa: el acabado del bloque
   (46 px vacío / 285 px con operación) se conserva exacto. */
.v4-h-process-msgs:empty{ display:none; }
.v4-h-msg{
  gap:8px;
  padding:0;
  border-radius:0;
  background:transparent;
  font-size:12px;
  line-height:18px;
}
.v4-h-msg-hint{ margin-top:0; }

.v4-h-bottom{
  gap:16px;
  border-color:oklch(0.928 0.006 264.531);
  box-shadow:0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
}
.v4-h-bottom-col{
  min-width:0;
  gap:12px;
}
.v4-h-bottom h3{
  font-size:12px;
  line-height:16px;
}
.v4-h-uploader{ border-radius:14px; }
.v4-h-bottom-col:first-child [data-h-inputs]{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.v4-h-bottom-col:first-child .v4-h-uploader{
  padding:12px;
}
.v4-h-uploader .v4-h-ico{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:10px;
}
.v4-h-uploader .v4-h-ico--red{
  background:var(--h-red-100);
  color:var(--h-red-600);
}
.v4-h-uploader .v4-h-ico--green{
  background:var(--h-green-200);
  color:#15803d;
}
.v4-h-uploader .v4-h-ico svg{
  width:18px;
  height:18px;
}
.v4-h-uploader b{ line-height:20px; }
.v4-h-uploader > span:last-child > span{ line-height:16px; }
.v4-h-uploader em{ line-height:15px; }
.v4-h-outputs li{ line-height:20px; }
.v4-h-outputs svg{
  margin-top:2px;
  stroke-width:3;
}
.v4-h-bottom-col:nth-child(2):has(.v4-h-outputs > li:only-child) .v4-h-endpoint{
  margin-top:16px;
}
.v4-h-cta{ border-radius:14px; }
.v4-h-bottom-col:last-child{ justify-content:space-between; }
.v4-h-action-stack{
  display:flex;
  flex-direction:column;
  min-height:113px;
  gap:12px;
}
.v4-h-cta-detail:empty{ display:none; }
.v4-h-action-stack .v4-h-note{
  font-size:11px;
  line-height:16.5px;
}
.v4-h-action-stack .v4-h-note svg{
  width:12px;
  height:12px;
  flex-basis:12px;
}
.v4-h-action-stack .v4-h-cta-detail{ line-height:16.5px; }

@media (min-width:1024px){
  .v4-h-bottom{ position:relative; }
  .v4-h-process{ margin-top:-2px; }
  .v4-h-process-body{
    height:238.833px;
    grid-template-columns:2fr 1fr;
  }
  .v4-h-process-price{
    border-top:0;
    border-left:1px solid rgba(255,255,255,.1);
  }
  /* T5.2 (UI-15) — los mensajes iban en absoluto (top:185px) sobre el cuerpo
     de alto fijo y, con cápsulas en dos filas o resultados, se solapaban.
     Vuelven al flujo: franja propia bajo las cápsulas, y el bloque crece en
     vertical lo que el mensaje necesite. */
  /* T5.2 (UI-18) — 263 px era ALTO FIJO y la caja recorta (`overflow:hidden`):
     con dos archivos requeridos el contenido real ya medía 317 px, así que el
     CTA de «Ejecuta tu proceso» —anclado abajo por `justify-content:
     space-between`— caía fuera de la tarjeta, y con tres archivos el tercer
     uploader quedaba partido por la mitad. Pasa a ALTO MÍNIMO: la composición
     de tres columnas y su acabado se conservan cuando el contenido cabe, y
     cuando no cabe la tarjeta crece en vez de cortar. Las tres columnas siguen
     midiendo lo mismo entre ellas porque la rejilla estira por igual
     (`align-items: stretch`, valor por defecto). */
  .v4-h-bottom{
    min-height:263px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .v4-h-bottom-col + .v4-h-bottom-col{
    border-top:0;
    border-left:0;
  }
  .v4-h-bottom-col:not(:last-child){
    border-right:1px solid var(--h-gray-200);
  }
}

@media (min-width:768px){
  .v4-h-bottom-col + .v4-h-bottom-col{
    border-top:0;
    border-left:0;
  }
  .v4-h-bottom-col:not(:last-child){
    border-right:1px solid var(--h-gray-200);
  }
}

@media (max-width:1023px){
  .v4-h-process-head{ flex-wrap:wrap; }
  .v4-h-process-sequence{
    overflow-x:auto;
    padding-bottom:4px;
  }
  /* T5.3 — sin tope de 120/102 px en el título de cápsula: la fila ya
     desplaza en horizontal y el tope solo producía elipsis con sitio libre. */
  .v4-h-unit-title,
  .v4-h-process-sequence > .v4-h-unit:not(:first-child) .v4-h-unit-title{
    max-width:none;
  }
  .v4-h-price-breakdown-popover{
    width:min(328px,calc(100vw - 88px));
  }
}

@media (max-width:767px){
  .v4-h-bottom{
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
    gap:16px;
  }
  .v4-h-bottom-col + .v4-h-bottom-col{
    border-top:0;
    border-left:0;
  }
  .v4-h-bottom-col:not(:last-child){
    border-right:0;
    border-bottom:1px solid var(--h-gray-200);
  }
  /* T5.3 — sin alturas mínimas heredadas del escritorio: apiladas solo
     sostenían espacio vacío antes de elegir operación. */
  .v4-h-bottom-col{ min-height:0; }
}

@media (max-width:639px){
  .v4-h-summary{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .v4-h-process-head{
    align-items:flex-start;
    flex-direction:column;
    height:auto;
    min-height:46px;
    gap:6px;
  }
  .v4-h-process-meta{
    width:100%;
    flex-wrap:wrap;
    gap:6px;
  }
  .v4-h-process-flow,
  .v4-h-process-price,
  .v4-h-bottom-col{ padding:16px; }
  .v4-h-price-breakdown{ right:16px; }
}

/* ── Trabajos del lote (T2.3, D64) ──────────────────────────── */
/* Sección AÑADIDA, no reescrita (D61). Ninguna regla sale de `v4-h-job*`,
   `v4-h-add-job`, `v4-h-batch-line` o `.v4-h-bottom.is-batch`: `utilidades.html`
   y las páginas de utilidad comparten esta hoja y no deben verse alcanzadas. */
.v4-h-job{ display:flex; flex-direction:column; gap:10px; }
.v4-h-job + .v4-h-job{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--h-gray-200);
}
.v4-h-job-head{ display:flex; align-items:center; gap:10px; }
.v4-h-job-title{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--h-gray-500);
}
.v4-h-job-state{
  display:inline-flex; align-items:center; gap:4px; margin-left:auto;
  border-radius:5px; padding:2px 6px; font-size:10px; font-weight:700;
  white-space:nowrap;
}
.v4-h-job-state svg{ width:11px; height:11px; }
/* Los dos únicos literales de color del corte: el paso 700 de los tokens 500
   que la zona ya usa (`--h-green-500`, `--h-orange-500`). */
.v4-h-job-state--ready{ background:#f0fdf4; color:#15803d; }
.v4-h-job-state--missing{ background: var(--h-orange-100); color:#c2410c; }
.v4-h-job-remove{
  display:inline-flex; padding:4px; border:0; background:none; cursor:pointer;
  border-radius:6px; color: var(--h-gray-400);
}
.v4-h-job-remove:hover{ color: var(--h-gray-800); background: var(--h-gray-50); }
.v4-h-job-remove svg{ width:14px; height:14px; }
.v4-h-job-files{ display:flex; flex-direction:column; gap:8px; }
.v4-h-job-error{ font-size:11px; line-height:1.45; color:#c2410c; }
.v4-h-add-job{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; font-size:13px;
}
.v4-h-job-hint{ font-size:11px; color: var(--h-gray-400); }
.v4-h-batch-line{ font-size:11px; color:rgba(255,255,255,.55); }

/* La zona de archivos pasa a ancho completo con dos o tres trabajos. El corte
   es 768 px, que es donde T2.2 pasa de una columna a tres; por debajo la zona
   ya está apilada y NADA cambia. */
@media (min-width:768px){
  .v4-h-bottom.is-batch{
    grid-template-columns:repeat(2,minmax(0,1fr));
    /* T2.2 fija la altura del trío de columnas (`height:263px`) y la zona
       recorta con `overflow:hidden`. Con dos o tres trabajos la primera
       columna crece, así que en lote la altura vuelve a ser la del contenido:
       sin esto, los trabajos quedarían cortados. */
    height:auto;
  }
  .v4-h-bottom.is-batch > .v4-h-bottom-col:first-child{
    grid-column:1 / -1;
    /* T2.2 separa las columnas con `border-right` en todas menos la última. En
       una fila a ancho completo ese borde colgaría suelto a la derecha: se
       sustituye por el que la separa de la fila de abajo. */
    border-right:0;
    border-bottom:1px solid var(--h-gray-200);
  }
}

/* ══════════════════════════════════════════════════════════════════
   T3.1 · Ejecución: estado por operación y bloque de resultado
   ══════════════════════════════════════════════════════════════════
   SOLO SE AMPLÍA. Ninguna regla anterior se toca y ninguna de estas clases
   alcanza al catálogo ni a las páginas de utilidad, que comparten esta hoja. */

/* Estado global de ejecución, dentro de la cabecera oscura del proceso. Reutiliza
   la píldora `.v4-h-state` de T2.2 y solo añade sus tres tonos. */
.v4-h-state--run-processing{ background:rgba(96,165,250,.2); color:#93c5fd; border-color:rgba(96,165,250,.3); }
.v4-h-state--run-completed{ background:rgba(34,197,94,.2); color:var(--h-green-300); border-color:rgba(34,197,94,.3); }
.v4-h-state--run-incident{ background:rgba(248,113,113,.2); color:#fca5a5; border-color:rgba(248,113,113,.3); }
/* T5.2 (COPY-03) — turno del usuario en la mesa. Tono de «te esperamos a ti»,
   el mismo amarillo que `configuring` usa para «falta un dato tuyo»: no es
   trabajo en curso (azul) y tampoco está terminado (verde). */
.v4-h-state--run-review{ background:rgba(250,204,21,.2); color:var(--h-yellow-300); border-color:rgba(250,204,21,.3); }
.v4-h-run-progress{ font-size:12px; font-weight:600; color:rgba(255,255,255,.75); }

/* Estado POR OPERACIÓN sobre la cadena que ya pintaba T2.2. */
.v4-h-unit-run{ font-size:10px; font-weight:600; margin-top:2px; }
.v4-h-unit.is-running{ border-color:rgba(96,165,250,.5); background:rgba(96,165,250,.14); }
.v4-h-unit.is-running .v4-h-unit-run{ color:#93c5fd; }
.v4-h-unit.is-done{ border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.14); }
.v4-h-unit.is-done .v4-h-unit-run{ color:var(--h-green-300); }
.v4-h-unit.is-failed{ border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.14); }
.v4-h-unit.is-failed .v4-h-unit-run{ color:#fca5a5; }
.v4-h-unit.is-skipped{ opacity:.55; }
.v4-h-unit.is-skipped .v4-h-unit-run{ color:rgba(255,255,255,.55); }
.v4-h-unit.is-pending .v4-h-unit-run{ color:rgba(255,255,255,.45); }

/* Bloque de resultado: tarjeta clara, como la zona de archivos y acción. */
.v4-h-run{
  display:flex; flex-direction:column; gap:12px; padding:20px;
  border:1px solid var(--h-gray-200); border-radius: var(--h-r-2xl);
  background:#fff; box-shadow: var(--h-sh-sm);
}
/* `display:flex` gana al `[hidden]` de la hoja del navegador: sin esta línea la
   sección de resultado se pinta como tarjeta blanca vacía cuando todavía no hay
   ejecución. Vale para TODOS los estados, no solo con la mesa contraída. */
.v4-h-run[hidden]{ display:none; }
.v4-h-run h3{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--h-gray-500);
}
.v4-h-run-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color: var(--h-gray-500); }
.v4-h-run-state{
  display:inline-flex; align-items:center; border-radius:999px; padding:2px 10px;
  font-size:12px; font-weight:600;
}
.v4-h-run-state--processing{ background:#eff6ff; color:#1d4ed8; }
.v4-h-run-state--completed{ background:#f0fdf4; color:#15803d; }
.v4-h-run-state--incident{ background: var(--h-orange-100); color:#c2410c; }
.v4-h-run-result{ display:flex; flex-direction:column; gap:8px; }
.v4-h-run-result > b{ font-size:14px; font-weight:600; color: var(--h-gray-800); }
.v4-h-run-files{ display:flex; flex-wrap:wrap; gap:8px; }
.v4-h-run-file{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  border:1px solid var(--h-green-500); border-radius: var(--h-r-xl);
  background:#f0fdf4; padding:10px 14px; max-width:100%;
}
.v4-h-run-file:hover{ background:#dcfce7; }
.v4-h-run-file b{ display:block; font-size:13px; font-weight:600; color:#15803d; }
.v4-h-run-file > span > span{ display:block; font-size:11px; color:#166534; }
/* T4.2b/D89 — Artefacto que EXISTE y todavía no es descargable. Se ve distinto
   de un enlace y no es clicable: no hay `<a href>` vacío ni enlace escondido. */
.v4-h-run-file.is-locked{
  border-color: var(--h-gray-200); background: var(--h-gray-50);
  cursor:default;
}
.v4-h-run-file.is-locked b{ color: var(--h-gray-800); }
.v4-h-run-file.is-locked > span > span{ color: var(--h-gray-500); }

/* T4.2b — Bloque de comprobación gratuita. Mismo lenguaje visual que el de
   resultado: es su antesala, no otra pantalla. Vive aquí y no en
   `styles-landing.css` porque la maquinaria es una sola (D90). */
.v4-h-check-panel{
  display:flex; flex-direction:column; gap:12px; padding:20px;
  border:1px solid var(--h-gray-200); border-radius: var(--h-r-2xl);
  background:#fff; box-shadow: var(--h-sh-sm);
}
.v4-h-check-panel[hidden]{ display:none; }
.v4-h-check-panel h3{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--h-gray-500);
}
.v4-h-check-panel-body{ display:flex; flex-direction:column; gap:10px; font-size:13px;
                  line-height:1.55; color: var(--h-gray-800); }
.v4-h-check-panel-protocol{ display:flex; flex-direction:column; gap:6px;
                      padding-left:20px; font-size:12px; line-height:1.5;
                      color: var(--h-gray-500); }
.v4-h-check-panel-protocol li{ list-style:decimal; }
.v4-h-check-panel--checkReady{ border-color: var(--h-green-500); }
.v4-h-check-panel--failed{ border-color: var(--h-orange-100); }

.v4-h-run-warn{ font-size:12px; line-height:1.5; color:#c2410c; }
.v4-h-run-none{ font-size:12px; line-height:1.5; color: var(--h-gray-500); }
.v4-h-run-note{ font-size:11px; line-height:1.5; color: var(--h-gray-400); }
.v4-h-run-summary summary{ font-size:12px; font-weight:600; color: var(--h-gray-500); cursor:pointer; }
.v4-h-run-stage{
  border-top:1px solid var(--h-gray-200); padding:8px 0;
  display:flex; flex-direction:column; gap:2px;
}
.v4-h-run-stage-head{ display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.v4-h-run-stage-head b{ color: var(--h-gray-800); font-weight:600; }
.v4-h-run-stage-head span{ color: var(--h-gray-500); }
.v4-h-run-counters,
.v4-h-run-job{ font-size:11px; color: var(--h-gray-400); overflow-wrap:anywhere; }
.v4-h-run-job code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ==========================================================================
   T3.2 — Carril nativo: niveles, recomendación, caja viva e informes
   AMPLIACIÓN ADITIVA. Ninguna regla anterior se reescribe, y ninguna de estas
   clases alcanza `utilidades.html` ni las páginas de utilidad heredadas.
   ========================================================================== */

/* Niveles de reparación (D69). Desplegable EN LA PROPIA PÁGINA, sin modal,
   reutilizando el patrón de radios de las variantes de la tarjeta agrupadora.
   T5.2 (UI-05) — el mando sigue en la tarjeta; el panel se abre a lo ancho del
   recorrido, debajo de la fila, para que la cuadrícula no herede su altura. */
.v4-h-levels-toggle{
  margin-top:8px; align-self:flex-start;
  font:inherit; font-size:11px; font-weight:600; color: var(--h-purple-600);
  background:none; border:0; padding:2px 0; cursor:pointer; text-align:left;
}
.v4-h-levels-toggle::before{ content:'▸ '; }
.v4-h-levels-toggle.is-open::before{ content:'▾ '; }
.v4-h-levels-toggle:focus-visible{ outline:2px solid var(--h-purple-500); outline-offset:2px; }

.v4-h-levels{
  margin-top:14px; padding:14px 16px;
  border:1px solid var(--h-purple-100, #f3e8ff); border-radius: var(--h-r-xl);
  background: var(--h-purple-50, #faf5ff);
}
.v4-h-levels-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.v4-h-levels-title{ font-size:12px; font-weight:700; color: var(--h-purple-700); }
.v4-h-levels-close{
  font:inherit; font-size:11px; font-weight:600; color: var(--h-gray-500);
  background:none; border:0; padding:2px 4px; cursor:pointer; text-decoration:underline;
}
.v4-h-levels-close:hover{ color: var(--h-gray-800); }
/* Horizontal mientras quepa: los tres niveles se comparan de un vistazo y el
   panel no vuelve a crecer hacia abajo como cuando vivía en la tarjeta. */
.v4-h-levels-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:8px 16px; align-items:start;
}
.v4-h-levels .v4-h-variant{ flex-wrap:wrap; align-items:flex-start; padding:4px 0; }
.v4-h-level-note{
  flex-basis:100%; font-size:10px; line-height:1.4; color: var(--h-gray-400);
  padding-left:20px;
}

/* Recomendación (D70). Se DESTACA; nunca se marca la casilla. */
.v4-h-badge--recommended{
  background: var(--h-purple-100, #f3e8ff); color: var(--h-purple-700);
  border-color: var(--h-purple-200, #e9d5ff);
}
.v4-h-card--recommended{
  box-shadow:0 0 0 2px var(--h-purple-300, #d8b4fe);
}
.v4-h-card-reco{
  font-size:11px; line-height:1.45; color: var(--h-purple-700); margin-top:6px;
}

/* Caja lateral viva durante la ejecución (D71). Al terminar recupera su ayuda,
   así que estas reglas solo pintan mientras `is-*` está presente. */
.v4-h-help--live .v4-h-help-live-head{
  font-size:12px; line-height:1.45; color: var(--h-gray-800); margin-bottom:8px;
}
.v4-h-help--live .v4-h-help-live-progress{
  font-size:11px; font-weight:600; color: var(--h-purple-600); margin-bottom:12px;
}
.v4-h-help-item--live{ align-items:flex-start; }
.v4-h-help-dot--pending{ background: var(--h-gray-300, #d1d5db); }
.v4-h-help-dot--running{ background: var(--h-purple-500); }
.v4-h-help-dot--done{ background:#22c55e; }
.v4-h-help-dot--failed{ background:#ef4444; }
.v4-h-help-dot--skipped{ background: var(--h-gray-200); }

/* Informe de sesión: diagnóstico, contadores rotulados e integridad (D71). */
.v4-h-run-report{ display:flex; flex-direction:column; gap:8px; }
.v4-h-run-report > b{ font-size:13px; font-weight:600; color: var(--h-gray-800); }
.v4-h-run-report p{ font-size:12px; line-height:1.5; color: var(--h-gray-500); }
.v4-h-run-facts, .v4-h-run-checklist, .v4-h-run-warnings{
  display:flex; flex-direction:column; gap:4px; list-style:none;
}
.v4-h-run-facts li, .v4-h-run-counters li{
  display:flex; justify-content:space-between; gap:12px;
  font-size:11px; color: var(--h-gray-500);
}
.v4-h-run-facts li span:last-child, .v4-h-run-counters li span:last-child{
  font-weight:600; color: var(--h-gray-800); white-space:nowrap;
}
.v4-h-run-checklist li, .v4-h-run-warnings li{
  font-size:11px; line-height:1.45; color: var(--h-gray-500); padding-left:12px;
  position:relative;
}
.v4-h-run-checklist li::before,
.v4-h-run-warnings li::before{ content:'·'; position:absolute; left:4px; }
.v4-h-run-warnings li{ color:#c2410c; }
.v4-h-run-reco{
  border:1px solid var(--h-purple-200, #e9d5ff); border-radius:8px;
  padding:10px; display:flex; flex-direction:column; gap:4px;
}
.v4-h-run-reco b{ font-size:12px; color: var(--h-gray-800); }
.v4-h-run-integrity{ font-size:11px; line-height:1.45; color:#15803d; }
.v4-h-run-integrity.is-bad{ color:#c2410c; }
.v4-h-run-technical summary{
  font-size:11px; font-weight:600; color: var(--h-gray-400); cursor:pointer;
}
.v4-h-run-technical pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px;
  line-height:1.4; color: var(--h-gray-500); overflow-x:auto; margin-top:6px;
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* =========================================================
   T4.1 (D78) · Entrada desde una landing canónica
   ---------------------------------------------------------
   Solo AMPLIACIÓN: ninguna clase existente se modifica.
   El banner está INTEGRADO en el flujo (`position:static`): nada flotante,
   nada oculto, nada atenuado. En móvil ocupa el ancho y no fuerza scroll.
   ========================================================= */

.v4-h-entry{
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--h-indigo-100, #e0e7ff);
  border-left: 3px solid var(--h-indigo-600, #4f46e5);
  border-radius: 10px;
  background: #f8f9ff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.v4-h-entry[hidden]{ display: none; }

.v4-h-entry-from{
  font-size: 12px; font-weight: 700; color: var(--h-gray-800, #1f2937);
  flex: 1 1 100%;
}
.v4-h-entry-line{
  font-size: 12px; line-height: 1.5; color: var(--h-gray-500, #6b7280);
  flex: 1 1 240px; min-width: 0;
}
.v4-h-entry-go{
  font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--h-indigo-600, #4f46e5);
  border: 1px solid var(--h-indigo-100, #e0e7ff); border-radius: 8px;
  padding: 6px 10px; background: #fff; white-space: nowrap;
}
.v4-h-entry-go:hover{ border-color: var(--h-indigo-400, #818cf8); }
.v4-h-entry-add{
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--h-indigo-600, #4f46e5);
  border: 0; border-radius: 8px; padding: 7px 12px; white-space: nowrap;
}

/* Realce de una tarjeta prevista (09). Es SOLO un realce: la tarjeta sigue
   deshabilitada y con su badge «Próximamente». */
.v4-h-card.is-entry-highlight{
  border-color: var(--h-indigo-400, #818cf8);
  box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}

/* Confirmación B, dentro de «Tu proceso editorial». */
.v4-h-entry-confirm{
  margin: 0 0 10px 0; padding: 8px 12px;
  font-size: 12px; line-height: 1.5; color: var(--h-gray-800, #1f2937);
  background: #f8f9ff; border-radius: 8px;
  border-left: 3px solid var(--h-indigo-600, #4f46e5);
}
.v4-h-entry-confirm[hidden]{ display: none; }

/* ==========================================================================
   T4.2 — Expediente persistente: enlace de continuidad, plazo, borrado y
   recuperación. AMPLIACIÓN ADITIVA: ninguna regla anterior se reescribe y
   ninguna de estas clases alcanza `utilidades.html` ni las páginas heredadas.
   ========================================================================== */

.v4-h-run-persist{
  display:flex; flex-direction:column; gap:8px;
  border-top:1px solid var(--h-gray-200, #e5e7eb); padding-top:12px;
}
.v4-h-run-persist > b{ font-size:13px; font-weight:600; color: var(--h-gray-800, #1f2937); }
.v4-h-run-persist > p{ font-size:12px; line-height:1.5; color: var(--h-gray-500, #6b7280); }
.v4-h-run-persist.is-bad{ border-top-color: var(--h-orange-100, #ffedd5); }

/* El enlace ES la credencial: se muestra entero, seleccionable y copiable de
   una vez. No se acorta y no se envía a ningún sitio. */
.v4-h-run-link{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.v4-h-run-link input{
  flex:1 1 260px; min-width:0; font: inherit; font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding:8px 10px; border:1px solid var(--h-gray-200, #e5e7eb);
  border-radius:8px; background: var(--h-gray-50, #f9fafb);
  color: var(--h-gray-800, #1f2937);
}
.v4-h-btn{
  font: inherit; font-size:12px; font-weight:600; cursor:pointer;
  border-radius:8px; padding:8px 12px; white-space:nowrap;
}
.v4-h-btn--ghost{
  color: var(--h-gray-800, #1f2937); background:#fff;
  border:1px solid var(--h-gray-200, #e5e7eb);
}
.v4-h-btn--ghost:hover{ border-color: var(--h-gray-400, #9ca3af); }
/* Irreversible, y por eso se ve que lo es. Sin ser el control dominante del
   bloque: el resultado manda. */
.v4-h-btn--danger{
  align-self:flex-start; color:#b91c1c; background:#fff; border:1px solid #fecaca;
}
.v4-h-btn--danger:hover{ background:#fef2f2; border-color:#f87171; }

.v4-h-recovery{
  display:flex; flex-direction:column; gap:6px; padding:12px 16px;
  font-size:12px; line-height:1.5; color: var(--h-gray-800, #1f2937);
  background:#f8f9ff; border-radius:12px;
  border-left:3px solid var(--h-indigo-600, #4f46e5);
}
.v4-h-recovery[hidden]{ display:none; }
.v4-h-recovery.is-bad{ background:#fff7ed; border-left-color:#c2410c; }

/* Estado intermedio del borrado (T4.2). Sustituye al bloque de resultado
   mientras dura la llamada: ni progreso, ni artefactos, ni enlace. */
.v4-h-run-deleting{ display:flex; align-items:center; gap:12px; padding:4px 0; }
.v4-h-run-deleting b{ font-size:14px; font-weight:600; color: var(--h-gray-800, #1f2937); }
/* T4.1b·A — señal de trabajo en curso, mismo patrón que el borrado: un
   spinner y una frase que dice QUÉ está pasando. Sustituye a la nota suelta
   que solo pedía esperar, y es lo que evita leer un CTA apagado como «esto
   se ha bloqueado» en vez de «esto está ejecutando». */
.v4-h-run-working{ display:flex; align-items:center; gap:12px; padding:4px 0; }
.v4-h-run-working b{ font-size:14px; font-weight:600; color: var(--h-gray-800, #1f2937); }
.v4-h-run-working .v4-h-run-note{ margin-top:2px; }
.v4-h-spinner{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--h-gray-200, #e5e7eb);
  border-top-color: var(--h-indigo-600, #4f46e5);
  animation: v4-h-spin .7s linear infinite;
}
@keyframes v4-h-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .v4-h-spinner{ animation-duration: 2.4s; }
}

/* ==========================================================================
   T5.1 — Entrega del lote: una fila por trabajo, con su comprobación y su marca
   AMPLIACIÓN ADITIVA. Reutiliza los tokens y el patrón del panel de
   comprobación individual (`.v4-h-check-panel`): son el mismo momento del
   recorrido y no pueden parecer dos productos. Ninguna de estas clases alcanza
   `utilidades.html` ni las páginas de utilidad heredadas.
   ========================================================================== */

.v4-h-batch-panel{
  display:flex; flex-direction:column; gap:12px; padding:20px;
  border:1px solid var(--h-gray-200); border-radius: var(--h-r-2xl);
  background:#fff; box-shadow: var(--h-sh-sm);
}
.v4-h-batch-panel[hidden]{ display:none; }
.v4-h-batch-title{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--h-gray-500);
}
.v4-h-batch-summary{ font-size:13px; font-weight:600; color: var(--h-gray-800); }
.v4-h-batch-note{ font-size:12px; line-height:1.5; color: var(--h-gray-500); }
.v4-h-batch-error{ font-size:12px; line-height:1.5; color:#c2410c; }

.v4-h-batch-list{ display:flex; flex-direction:column; gap:10px; }
.v4-h-batch-row{
  display:flex; flex-direction:column; gap:8px; padding:12px;
  border:1px solid var(--h-gray-200); border-radius: var(--h-r-xl);
  background: var(--h-gray-50, #f9fafb);
}
.v4-h-batch-row--checkReady{ border-color: var(--h-green-500); }
.v4-h-batch-row--unlocked{ border-color: var(--h-green-500); background:#fff; }
.v4-h-batch-row--failed,
.v4-h-batch-row--checkUnavailable,
.v4-h-batch-row--unavailable{ border-color: var(--h-orange-100); }

.v4-h-batch-head{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.v4-h-batch-label{ font-size:13px; font-weight:600; color: var(--h-gray-800); }
.v4-h-batch-state{ font-size:11px; color: var(--h-gray-500); }
.v4-h-batch-reason{ font-size:12px; line-height:1.5; color:#c2410c; }

/* Los enlaces se envuelven: con dos archivos y una pantalla estrecha, no puede
   haber scroll horizontal. */
.v4-h-batch-files{ display:flex; flex-wrap:wrap; gap:8px; }
.v4-h-batch-test,
.v4-h-batch-dl{
  font-size:12px; font-weight:600; padding:6px 12px; border-radius: var(--h-r-lg);
  text-decoration:none; overflow-wrap:anywhere;
}
.v4-h-batch-test{ color: var(--h-purple-600); border:1px solid var(--h-purple-600); }
.v4-h-batch-dl{ color:#fff; background: var(--h-green-500); }

/* La marca es del USUARIO: control real, área de pulsación cómoda y nunca
   preseleccionado. */
.v4-h-batch-pick{
  display:flex; gap:8px; align-items:flex-start; cursor:pointer;
  font-size:12px; line-height:1.45; color: var(--h-gray-800);
}
.v4-h-batch-pick input{ flex:0 0 auto; margin-top:2px; width:16px; height:16px; }

.v4-h-batch-pay{
  align-self:flex-start; max-width:100%; padding:10px 18px;
  font-size:13px; font-weight:600; color:#fff; background: var(--h-purple-600);
  border:0; border-radius: var(--h-r-lg); cursor:pointer;
}
.v4-h-batch-pay[disabled]{ background: var(--h-gray-200); color: var(--h-gray-500); cursor:default; }

@media (max-width: 640px){
  .v4-h-batch-panel{ padding:14px; }
  .v4-h-batch-head{ flex-direction:column; gap:2px; }
  .v4-h-batch-pay{ width:100%; align-self:stretch; text-align:center; }
}

/* ==========================================================================
   T5.2 — Pasada visual sobre la home publicada
   AMPLIACIÓN ADITIVA. Ninguna regla anterior se reescribe aquí.
   ========================================================================== */

/* UI-01 · Arranque en frío. Los dos bloques que el HTML monta VACÍOS —el panel
   oscuro del proceso y la fila de archivos/resultados/acción— no se enseñan
   hasta que el primer render real los ha llenado. `is-booted` la pone
   `renderHome` al terminar: no hay retardo artificial ni spinner, y el resto
   de la home se pinta desde el primer momento. */
.v4-h-home:not(.is-booted) .v4-h-process,
.v4-h-home:not(.is-booted) .v4-h-bottom{ display:none; }

/* UI-03 · «Tu proceso editorial» mientras está vacío: solo su cabecera, que ya
   lo identifica y dice que aún no hay operaciones. Con la primera operación
   recupera el panel completo, sin ninguna regla propia del estado con
   proceso. */
.v4-h-process.is-empty .v4-h-process-body,
.v4-h-process.is-empty .v4-h-process-msgs{ display:none; }
.v4-h-process.is-empty .v4-h-process-head{ border-bottom:0; }

/* UI-04 · Cierre de página. Una línea, alineada con la columna de la home.
   UI-09 — más aire y menos contraste: es un cierre discreto, no una nota
   técnica pegada al final. La regla superior se aclara hasta insinuarse. */
.v4-h-foot{
  width:100%; max-width:1152px; margin-inline:auto;
  padding:56px 24px 48px;
}
.v4-h-foot p{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding-top:24px; border-top:1px solid var(--h-gray-100, #f3f4f6);
  font-size:12px; line-height:20px; color: var(--h-gray-400);
}
.v4-h-foot a{ color: var(--h-gray-400); text-decoration:none; }
.v4-h-foot a:hover{ color: var(--h-gray-800); text-decoration:underline; }
@media (max-width:639px){
  /* T5.3 — hueco inferior para que el badge fijo de reCAPTCHA no tape
     los enlaces del pie al llegar al final de la página. */
  .v4-h-foot{ padding:40px 16px 88px; }
}

/* ==========================================================================
   T5.4 — Selector de idioma (ES/CA/EN)
   Vive FUERA de `.v4-nav` para sobrevivir a su ocultación bajo 768 px:
   el idioma tiene que poder cambiarse también en móvil (pendiente de T5.3).
   ========================================================================== */
/* El selector vive a la derecha del todo. Con el resumen visible, es el
   resumen quien empuja (su margin-left:auto) y el selector va pegado a él;
   con el resumen oculto, empuja el propio selector. */
.v4-lang{ position:relative; display:inline-flex; margin-left:auto; }
.v4-home-page [data-h-summary]:not([hidden]) ~ .v4-lang{ margin-left:0; }
.v4-lang-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border:0; border-radius:8px;
  background:transparent; color:#4b5563; cursor:pointer;
  font:inherit; font-size:14px; font-weight:600; line-height:20px;
}
.v4-lang-btn:hover{ background:#f3f4f6; color:#111827; }
.v4-lang-btn svg{ width:14px; height:14px; flex:0 0 14px; }
.v4-lang-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  min-width:132px; padding:6px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 8px 24px rgba(17,24,39,.12);
}
.v4-lang-menu[hidden]{ display:none; }
.v4-lang-menu button{
  display:block; width:100%; padding:7px 10px;
  border:0; border-radius:6px; background:transparent; cursor:pointer;
  color:#111827; font:inherit; font-size:14px; line-height:20px; text-align:left;
}
.v4-lang-menu button:hover{ background:#f3f4f6; }
.v4-lang-menu button[aria-selected="true"]{
  background:#faf5ff; color:#7e22ce; font-weight:600;
}
@media (max-width:900px){
  /* La navegación baja a su segunda fila (order:3, regla previa) o desaparece
     bajo 768; resumen y selector permanecen en la primera y el selector no
     desaparece nunca. */
  .v4-lang{ order:2; }
}
@media (max-width:639px){
  .v4-lang-btn{ padding:4px 6px; font-size:13px; }
}