/* ============================================================================
   HAPPINESS PLAY — ALPHA 2 · Capa de rediseño visual del portal interior
   Especificación: ALPHA2_REDISENO_PORTAL_INTERIOR.md (canónica, no improvisar)
   Se carga DESPUÉS de bootstrap.min.css y styles.css (y del <style> de
   head_privado) para ganar la cascada sin abusar de !important.
   Solo diseño: nada de textos, lógica ni datos. Colores de las 8 áreas: intocables.
   Estado: PASO A PASO — implementado: base global + cabecera + navegación +
   footer + pantalla "Cómo es mi vida" (rueda-de-la-vida.html).
   ========================================================================== */

/* ===== §21 Bloque CSS inicial obligatorio ================================= */

:root {
  /* Marca */
  --hp-blue: #004FA0;
  --hp-blue-hover: #003F80;
  --hp-blue-active: #00356C;
  --hp-blue-dark: #002E5D;
  --hp-blue-soft: #E8F2FB;
  --hp-blue-soft-2: #F3F7FC;

  /* Texto */
  --hp-heading: #081522;
  --hp-text: #42566B;
  --hp-text-secondary: #6B7D90;
  --hp-text-muted: #718397;

  /* Superficies */
  --hp-white: #FFFFFF;
  --hp-page: #FFFFFF;
  --hp-surface-soft: #F7FAFD;
  --hp-surface-blue: #F3F7FC;

  /* Bordes */
  --hp-border: #D6E2EE;
  --hp-border-strong: #A9C7E5;
  --hp-divider: #E6EDF4;

  /* Estados */
  --hp-success: #1E9E4A;
  --hp-success-soft: #E9F7EE;
  --hp-danger: #D83A3A;
  --hp-danger-soft: #FCEDED;
  --hp-warning: #D99000;
  --hp-warning-soft: #FFF5D9;
  --hp-focus: #1677D2;

  /* Marca gráfica */
  --hp-logo-blue: #004FA0;
  --hp-logo-grey: #9E9C9C;

  /* Radios */
  --hp-radius-xs: 6px;
  --hp-radius-sm: 8px;
  --hp-radius-md: 12px;
  --hp-radius-lg: 16px;
  --hp-radius-pill: 999px;

  /* Sombras */
  --hp-shadow-card: 0 4px 14px rgba(0, 46, 93, 0.06);
  --hp-shadow-hover: 0 8px 22px rgba(0, 46, 93, 0.10);
  --hp-shadow-nav: 0 6px 16px rgba(0, 79, 160, 0.18);

  /* Espacios */
  --hp-space-1: 4px;
  --hp-space-2: 8px;
  --hp-space-3: 12px;
  --hp-space-4: 16px;
  --hp-space-5: 24px;
  --hp-space-6: 32px;
  --hp-space-7: 40px;
  --hp-space-8: 48px;
  --hp-space-9: 64px;
}

html {
  font-size: 16px;
}

/* §20.2 Una sola tipografía en TODA la interfaz (Arial solo fallback) */
body,
button,
input,
select,
textarea,
.popUp,
.pdf-page,
.userprofile,
footer {
  font-family: "Roboto", Arial, sans-serif !important;
}

body {
  margin: 0;
  background: var(--hp-page);
  color: var(--hp-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", Arial, sans-serif;
  color: var(--hp-heading);
  margin-top: 0;
}

h1 { font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 18px; line-height: 24px; font-weight: 700; }

p { margin: 0 0 16px; font-size: 16px; line-height: 24px; }

/* Foco visible unificado (§9.1) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(22, 119, 210, 0.28);
  outline-offset: 2px;
}

/* No permitir scroll horizontal del documento (§19.1 / §22).
   OJO: overflow-x:hidden hace que overflow-y compute como auto, body pasa a
   ser contenedor de scroll y eso ANULA position:sticky de las dos barras
   (medido: la barra se iba con el scroll). overflow-x:clip recorta igual pero
   NO crea contexto de scroll, asi que el sticky vuelve a funcionar. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; overflow-y: visible; }
}

/* ===== §6 Cabecera superior =============================================== */
header.header {
  background: var(--hp-white);
  border-bottom: 1px solid var(--hp-divider);
}
header.header .container {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Logo 150px (adiós al bloque de 215×110) */
header.header a.brand {
  float: none;
  display: block;
  width: 150px;
  height: 48px;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  /* patrón accesible: sin -999999px kilométrico */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
header.header nav.menu-header {
  float: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
header.header nav.menu-header a {
  padding: 4px 0;
  color: var(--hp-text-secondary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: none;
}
header.header nav.menu-header a:hover {
  color: var(--hp-blue);
  text-decoration: none;
}
header.header nav.menu-header a.user {
  padding-right: 24px;
  background-size: 17px;
}

/* ===== §7.5 Menu de utilidades del header (Microcommit E) =================
   Solo escritorio/tablet: en movil el header entero esta oculto y sigue
   mandando el quinto boton + menu-mob (congelados). Un desplegable a la
   derecha agrupa las utilidades; la navegacion principal no se toca. */
.hp-utils { position: relative; }
.hp-utils-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  background: var(--hp-white, #fff);
  border: 1px solid var(--hp-border);
  border-radius: 10px;
  color: var(--hp-text-secondary);
  cursor: pointer;
}
.hp-utils-btn:hover { color: var(--hp-blue); border-color: var(--hp-blue); }
.hp-utils-btn:focus-visible { outline: 2px solid var(--hp-focus, var(--hp-blue)); outline-offset: 2px; }
.hp-utils-chev { transition: transform .18s ease; }
.hp-utils-btn[aria-expanded="true"] .hp-utils-chev { transform: rotate(180deg); }
.hp-utils-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  max-width: 300px;
  background: var(--hp-white, #fff);
  border: 1px solid var(--hp-border);
  border-radius: 12px;
  box-shadow: var(--hp-shadow-hover, 0 8px 24px rgba(20, 50, 100, .14));
  padding: 6px;
  z-index: 1100; /* el nav sticky legacy usa 1001 */
  text-align: left; /* el legacy alinea menu-header a la derecha */
}
.hp-utils-menu[hidden] { display: none; }
.hp-utils-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--hp-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-utils-menu a:hover,
.hp-utils-menu a:focus-visible { background: var(--hp-blue-soft, #F3F7FC); color: var(--hp-blue); }
/* el enlace de perfil pierde el icono/padding legacy dentro del menu */
.hp-utils-menu a.user { background: none; padding: 10px 12px; }
/* H: bloque de identidad no interactivo en la cabecera del desplegable */
.hp-utils-id {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--hp-divider);
  margin-bottom: 6px;
  cursor: default;
}
.hp-utils-id .hp-utils-nombre {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--hp-text, #16283C);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-utils-id .hp-utils-mail {
  display: block;
  font-size: 12.5px;
  line-height: 18px;
  color: #5B6F83;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-utils-sep { border-top: 1px solid var(--hp-divider); margin: 6px 4px; }

/* ===== §7.6 E3: header privado en UNA sola fila ==========================
   El header superior desaparece en >=768 (legacy ya lo oculta <=991; aqui
   tambien >=992). Logo y utilidades viven en la fila del nav principal:
   [logo] [4 secciones] [usuario v]. Movil <=767 intacto (5o boton+menu-mob). */
@media (min-width: 992px) {
  header.header { display: none; }
}
@media (min-width: 768px) {
  nav.nav.profile_head_nav .container.hp-nav-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
  }
  /* el clearfix de bootstrap (::before/::after display:table) se volveria
     item de grid y rompe la fila: fuera en esta fila */
  nav.nav.profile_head_nav .container.hp-nav-fila::before,
  nav.nav.profile_head_nav .container.hp-nav-fila::after { content: none; }
  /* columnas explicitas: si el logo se oculta (tablet), el auto-emplazamiento
     correria los items una columna y .hp-utils caeria en la 1fr a ancho 0 */
  .hp-nav-fila > .hp-nav-brand { grid-column: 1; }
  .hp-nav-fila > ul { grid-column: 2; }
  .hp-nav-fila > .hp-utils { grid-column: 3; justify-self: end; }
  .hp-nav-brand {
    display: block;
    width: 132px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 0;
    color: transparent;
    overflow: hidden;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hp-nav-brand { display: none; } /* si no cabe, el logo se retira */
}

/* ===== §7.7 E4: marca compacta en escritorio estrecho ====================
   Medido: en la banda de container 970 (viewport 992-1199) el logo completo
   (132px) comprime las tarjetas a 171px y los titulos caen a 2 lineas; con
   container 1170 (>=1200) todo va a 1 linea. Cambio con margen de seguridad
   de 32px sobre 1199: compacto hasta 1231. El icono va como <img> con alt
   (accesibilidad); el fondo inline del enlace se anula con !important. */
.hp-nav-brand .hp-brand-compact { display: none; }
@media (min-width: 992px) and (max-width: 1231px) {
  .hp-nav-brand {
    width: 52px;
    background: none !important;
    display: flex;
    align-items: center;
    font-size: 0;
  }
  .hp-nav-brand .hp-brand-compact { display: block; width: 48px; height: 48px; }
}
@media (max-width: 767px) {
  .hp-nav-brand,
  .profile_head_nav .hp-utils { display: none; } /* movil congelado */
}


/* ===== §7 Navegación principal ============================================ */
/* Escritorio: 4 tarjetas blancas; SOLO la activa en azul sólido. */
nav.nav.profile_head_nav { margin-bottom: var(--hp-space-6); }

/* ===== §9 Botones (base global interna) =================================== */
.btn,
.btn.btn-default {
  text-transform: none;
  border-radius: var(--hp-radius-pill);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}

/* ===== §10 Campos ========================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #C7D6E5;
  border-radius: 10px;
  background: var(--hp-white);
  font-size: 16px;
  line-height: 24px;
  color: var(--hp-heading);
  box-shadow: none;
}
input::placeholder,
textarea::placeholder { color: #8392A3; opacity: 1; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: var(--hp-blue);
  box-shadow: 0 0 0 3px rgba(0, 79, 160, 0.14);
  outline: 0;
}
textarea { min-height: 120px; resize: vertical; }

/* ===== §11 Tarjeta base (para todas las pantallas) ======================== */
.hp-card {
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--hp-shadow-card);
}

/* ===== §15.1 Encabezado de página (compartido por las internas) =========== */
.titulo-seccion-desk:has(> .hp-page-title) {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  gap: 12px 32px;
  align-items: start;
  margin: 0 0 var(--hp-space-6);
}
/* --- Pasos 2 y 3 en escritorio: el indicador, bajo el titulo ---------------
   Antes el indicador de area caia en la columna DERECHA y la explicacion en
   la izquierda, asi que el cuadrante inferior derecho -- unos 660x140 px a
   1280 -- se quedaba vacio. Ahora la columna izquierda lleva titulo e
   indicador, uno debajo del otro, y la explicacion ocupa la derecha entera.
   Se colocan por celda explicita: el <script> que hay en medio no cuenta como
   hijo de rejilla (display:none), pero depender de ese detalle para el orden
   seria fragil.
   Solo de 768 px hacia arriba: en movil sigue apilado, como estaba. */
@media (min-width: 768px) {
  :is(.hp-page-step-2, .hp-page-step-3) .titulo-seccion-desk:has(> .hp-page-title) {
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    align-items: start;
    align-content: start;
    row-gap: 14px;
  }
  :is(.hp-page-step-2, .hp-page-step-3) .titulo-seccion-desk > .hp-page-title {
    grid-column: 1; grid-row: 1;
  }
  :is(.hp-page-step-2, .hp-page-step-3) .titulo-seccion-desk > #hp-area-nota {
    grid-column: 1; grid-row: 2; align-self: start;
  }
  /* El indicador ocupa el ancho de su columna; su margen inferior sobra
     porque ahora el hueco lo pone el row-gap de la rejilla. */
  :is(.hp-page-step-2, .hp-page-step-3) .titulo-seccion-desk > #hp-area-nota .hp-an {
    width: 100%; margin: 0;
  }
  /* La explicacion, a la derecha y arrimada arriba. Sin max-width de 620: la
     columna ya la limita, y con el limite quedaba otra franja muerta.
     Se fija la COLUMNA y no la fila, asi vale igual con un parrafo que con
     dos: el Paso 3 lleva dos -- de que va el paso, y que hacer -- y cada uno
     cae en la fila libre que le toca de esa columna. */
  :is(.hp-page-step-2, .hp-page-step-3) .titulo-seccion-desk > p {
    grid-column: 2;
    align-self: start;
    max-width: none;
    margin: 0 !important;
  }
  /* Con un solo parrafo cruza las dos filas y no deja media columna vacia. */
  :is(.hp-page-step-2, .hp-page-step-3)
    .titulo-seccion-desk > p:first-of-type:last-of-type {
    grid-row: 1 / span 2;
  }
}
/* Subtitulo de seccion/bloque (spec 2.2): 18/24/700 #0B4F91 con filete fino */
h2.hp-seccion-h {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #0B4F91;
  margin: 0 0 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--hp-divider);
}
h2.hp-seccion-h .hp-seccion-sub {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--hp-text-muted);
  margin-left: 8px;
}
.hp-page-title,
h2.titulo-seccion-desk .hp-page-title {
  max-width: none;
  color: var(--hp-heading) !important;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 36px !important;
  line-height: 42px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
}
.titulo-seccion-desk p {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: var(--hp-text) !important;
  max-width: 620px; /* item 11: línea de lectura más corta */
  padding: 0;
  margin: 4px 0 0 !important;
  position: relative;
}
/* item 12: la ayuda es un botón circular separado, no parte de la frase */
.titulo-seccion-desk a.help {
  position: static !important;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  margin: -2px 0 0 8px;
  border-radius: 50%;
  background-color: var(--hp-blue-soft);
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color .15s;
}
.titulo-seccion-desk a.help:hover { background-color: #D9E9F8; }

/* ===== §15.2 Panel de rueda y áreas ("Cómo es mi vida") =================== */
.como-es .border {
  display: grid;
  grid-template-columns: 52% 48%;
  gap: 0;
  align-items: stretch;
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 16px !important;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--hp-shadow-card) !important;
}
.como-es .col-md-7,
.como-es .col-md-5 {
  float: none !important;
  width: auto !important;
  min-width: 0;
}
.como-es .col-md-7 {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.como-es .col-md-5 {
  padding: 22px 24px 18px;
  border-left: 1px solid var(--hp-divider);
  display: flex;
  align-items: stretch;
}
.como-es .rueda { padding: 0 !important; height: auto; width: 100%; }
.como-es .rueda canvas {
  width: 100% !important;
  max-width: 584px !important;
  margin: 0 auto;
  display: block;
}
.como-es .areas { width: 100%; padding: 0 !important; display: flex; align-items: stretch; }
.como-es .areas > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Fila de área: rejilla §15.2 → etiqueta | nota | barras */
.como-es .areas > ul > li {
  flex: 1;
  display: grid !important;
  /* El nombre necesita ~200px para que 'Desarrollo profesional',
     'Crecimiento personal' y 'Familia y amigos' quepan en una linea. */
  grid-template-columns: minmax(200px, 1fr) 36px 140px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  height: auto !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--hp-divider);
}
.como-es .areas > ul > li:last-child { border-bottom: none; }
/* CAUSA DEL HUECO CENTRAL: la capa heredada (style1.css/style.css) le pone
   width:120px a este strong. La celda medía 302px y el texto solo 120, asi
   que quedaban 182px muertos Y los nombres largos partian en dos lineas.
   Se libera el ancho para que ocupe su columna; no se tapa con margenes. */
.como-es .areas > ul > li strong {
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  float: none !important;
}
/* El globo azul lo dibuja el sistema unico de footer_privado.tpl (#hp-tip),
   que ya es position:fixed fuera del flujo: no reserva ancho en la rejilla. */
.como-es .areas > ul > li strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--hp-text);
  margin: 0;
  background-repeat: no-repeat !important;
  background-position: 0 center !important;
  background-size: 26px !important;
  padding: 6px 0 6px 36px !important;
}
/* Iconos SVG vectoriales de cada área (assets existentes; colores intocables §3.3) */
.como-es .areas li.hogar strong { background-image: url("/styles/images/icon-hogar.svg") !important; }
.como-es .areas li.trabajo strong { background-image: url("/styles/images/icon-desarrollo.svg") !important; }
.como-es .areas li.salud strong { background-image: url("/styles/images/icon-salud.svg") !important; }
.como-es .areas li.dinero strong { background-image: url("/styles/images/icon-dinero.svg") !important; }
.como-es .areas li.crecimiento strong { background-image: url("/styles/images/icon-crecimiento.svg") !important; }
.como-es .areas li.familia strong { background-image: url("/styles/images/icon-familia.svg") !important; }
.como-es .areas li.amor strong { background-image: url("/styles/images/icon-amor.svg") !important; }
.como-es .areas li.ocio strong { background-image: url("/styles/images/icon-ocio.svg") !important; }
/* Colores de área (variable --wc): EXACTOS a los actuales, prohibido tocarlos */
.como-es .areas li.hogar { --wc: #F2A900; } .como-es .areas li.trabajo { --wc: #3557A5; }
.como-es .areas li.salud { --wc: #3E7C3E; } .como-es .areas li.dinero { --wc: #E9C900; }
.como-es .areas li.crecimiento { --wc: #258BC4; } .como-es .areas li.familia { --wc: #E7B5D0; }
.como-es .areas li.amor { --wc: #E90087; } .como-es .areas li.ocio { --wc: #16A63A; }
/* Nota en aro del color del área */
.como-es .areas li .hp-score {
  display: inline-block;
  background: var(--hp-white);
  border: 2px solid var(--wc);
  color: var(--wc);
  width: 32px;
  height: 32px;
  line-height: 28px;
  box-sizing: border-box;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  margin: 0;
  text-decoration: none;
  justify-self: center;
}
/* §15.3 Barras segmentadas: 10×10, radio 2, hueco 3, vacío #E3EAF1 */
.como-es .areas li .hp-bars { display: flex; gap: 3px; align-items: center; }
.como-es .areas li .hp-bars .hp-seg {
  display: block;
  width: 10px;
  height: 10px;
  background: #E3EAF1;
  border-radius: 2px;
  font-size: 0;
  overflow: hidden;
  text-decoration: none;
}
.como-es .areas li .hp-bars .hp-seg:hover { background: #C9D2DF; }
.como-es .areas li .hp-bars[data-v="1"] .hp-seg:nth-child(-n+1),
.como-es .areas li .hp-bars[data-v="2"] .hp-seg:nth-child(-n+2),
.como-es .areas li .hp-bars[data-v="3"] .hp-seg:nth-child(-n+3),
.como-es .areas li .hp-bars[data-v="4"] .hp-seg:nth-child(-n+4),
.como-es .areas li .hp-bars[data-v="5"] .hp-seg:nth-child(-n+5),
.como-es .areas li .hp-bars[data-v="6"] .hp-seg:nth-child(-n+6),
.como-es .areas li .hp-bars[data-v="7"] .hp-seg:nth-child(-n+7),
.como-es .areas li .hp-bars[data-v="8"] .hp-seg:nth-child(-n+8),
.como-es .areas li .hp-bars[data-v="9"] .hp-seg:nth-child(-n+9),
.como-es .areas li .hp-bars[data-v="10"] .hp-seg:nth-child(-n+10) { background: var(--wc); }

/* ===== §15.4 + feedback item 1: franja de acciones inferior de la tarjeta == */
.como-es .border .rueda-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--hp-divider);
  background: var(--hp-white);
}
.como-es .border .rueda-actions a {
  float: none !important;
  border: 1px solid transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.como-es .border .rueda-actions a:active { transform: translateY(1px); }
/* Guardar = botón primario §9.1 (min 132px) */
.como-es .border .rueda-actions .save {
  min-width: 132px;
  height: 48px;
  padding: 0 22px !important;
  border-color: var(--hp-blue) !important;
  border-radius: var(--hp-radius-pill);
  background: var(--hp-blue) !important;
  color: var(--hp-white) !important;
  font-size: 15px !important;
  line-height: 20px;
  font-weight: 700;
}
.como-es .border .rueda-actions .save:hover {
  background: var(--hp-blue-hover) !important;
  border-color: var(--hp-blue-hover) !important;
  box-shadow: none;
}
/* Empezar de nuevo = botón secundario §9.2 (min 170px) */
.como-es .border .rueda-actions .remove {
  min-width: 170px;
  height: 48px;
  padding: 0 22px !important;
  border-radius: var(--hp-radius-pill);
  background: var(--hp-white) !important;
  border-color: var(--hp-border-strong) !important;
  color: var(--hp-blue) !important;
  font-size: 15px !important;
  line-height: 20px;
  font-weight: 700;
}
.como-es .border .rueda-actions .remove:hover {
  background: var(--hp-surface-blue) !important;
  border-color: var(--hp-blue) !important;
}
/* Grupo social a la derecha; mismas cajas 44×44 radio 10 para FB y X */
.como-es .border .rueda-actions .rueda-actions__social {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Compartir deja de ser dos iconos sueltos en una esquina: se nombra lo que
   se comparte, en el mismo pie que Guardar y Empezar de nuevo. */
.como-es .rueda-actions .hp-compartir-txt {
  display: flex; flex-direction: column; text-align: right; margin-right: 2px;
}
.como-es .rueda-actions .hp-compartir-txt b {
  font-size: 14px; line-height: 18px; font-weight: 700; color: var(--hp-heading);
}
.como-es .rueda-actions .hp-compartir-txt > span {
  font-size: 12.5px; line-height: 16px; color: var(--hp-text-muted);
}
.como-es .rueda-actions .hp-share-main {
  height: 44px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--hp-border-strong); border-radius: var(--hp-radius-pill);
  background: var(--hp-white); color: var(--hp-blue);
  font-family: "Roboto", Arial, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;
}
.como-es .rueda-actions .hp-share-main:hover { background: var(--hp-surface-blue); border-color: var(--hp-blue); }
.como-es .rueda-actions .hp-share-main:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 2px; }
.como-es .border .rueda-actions .facebook:focus-visible,
.como-es .border .rueda-actions .twitter:focus-visible {
  outline: 2px solid var(--hp-blue); outline-offset: 2px;
}
.como-es .border .rueda-actions .facebook,
.como-es .border .rueda-actions .twitter {
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px;
  background-size: 18px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.como-es .border .rueda-actions .facebook {
  background-color: #1877F2 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='white'%20d='M13.4%2021.5v-8.1h2.72l.41-3.16h-3.13V8.22c0-.91.25-1.53%201.56-1.53h1.67V3.86c-.29-.04-1.28-.12-2.43-.12-2.4%200-4.05%201.47-4.05%204.16v2.44H7.42v3.16h2.73v8z'/%3E%3C/svg%3E") !important;
  background-size: 20px !important;
}
.como-es .border .rueda-actions .twitter {
  background-color: #000 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='white'%20d='M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z'/%3E%3C/svg%3E") !important;
  background-size: 19px !important;
}

/* ===== §15.5 ¿Qué dice tu rueda? ========================================== */
/* El hueco rueda -> lectura sumaba dos margenes (40px de .como-es en el CSS
   legacy + 48px de la tarjeta = 88px reales): los .container de bootstrap
   llevan clearfix, asi que NO colapsan. Se anula el de arriba y manda solo el
   de la tarjeta. Padding interior y contenido intactos. */
.como-es { margin-bottom: 0 !important; }
/* el titulo y su explicacion viven en dos columnas alineadas arriba; no hace
   falta tanto aire antes del panel de la rueda */
.como-es .titulo-seccion-desk:has(> .hp-page-title) { margin-bottom: 20px; }
.hp-lectura-card {
  background: var(--hp-surface-soft);
  border: 1px solid var(--hp-border);
  border-radius: 16px;
  box-shadow: none;
  padding: 24px 24px 20px;
  margin: 36px 0 0;
}
@media (max-width: 991px) { .hp-lectura-card { margin-top: 38px; } }
@media (max-width: 767px) { .hp-lectura-card { margin-top: 28px; } }
.hp-lectura-h {
  color: var(--hp-blue) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 30px !important;
  letter-spacing: -0.01em;
  margin: 0 0 16px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* La lectura la maqueta ahora su propio bloque (.rl2), asi que el contenedor
   deja de ser una rejilla de dos columnas: lo era para repartir parrafos
   sueltos, y ya no hay parrafos sueltos que repartir. */
.hp-lectura-card .rueda-lectura { display: block; }

/* ===== ¿Qué muestra tu Rueda de la Vida? (2026-08-03) ====================
   Un panel, cuatro piezas: la frase del rango, dos tarjetas iguales, la
   pregunta a todo el ancho y la nota tras un filete. Sin alturas fijas: cada
   pieza mide lo que ocupa su texto, que cambia con el idioma y con el numero
   de areas empatadas. */
.rl2 { display: flex; flex-direction: column; gap: 18px; }
.rl2-intro {
  font-size: 17px; line-height: 26px; color: var(--hp-text); margin: 0;
  max-width: 78ch;
}
.rl2-vacia { font-size: 16px; line-height: 24px; color: var(--hp-text); margin: 0; }
.rl2-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.rl2-card {
  border: 1px solid var(--hp-hair, #e6ecf3);
  border-radius: 14px;
  background: var(--hp-surface, #fff);
  padding: 16px 18px;
  min-width: 0;
}
.rl2-card-t {
  margin: 0 0 10px;
  font-size: 14px; line-height: 20px; font-weight: 700;
  color: var(--hp-blue, #004FA0);
  letter-spacing: .01em;
}
.rl2-iconos { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }

/* EL ICONO ES UN ENLACE AL AREA (Pedro, 19/08). Antes era decorativo: se veia
   «Hogar (2) tiene la puntuacion mas baja» junto al icono de Hogar, se pulsaba
   y no pasaba nada.
   Se envuelve el icono sin cambiarlo: mismo dibujo, misma posicion. Lo unico
   que se añade es la zona pulsable de 44 px --el minimo tactil-- centrada, de
   modo que el icono siga viendose de 30 px y el dedo tenga donde caer. */
a.rl2-ico-lnk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -7px;            /* la zona crece hacia fuera, la fila no se mueve */
  border-radius: 50%;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
a.rl2-ico-lnk:hover,
a.rl2-ico-lnk:focus-visible { background: rgba(0, 79, 160, .10); }
a.rl2-ico-lnk:focus-visible { outline: 2px solid #004FA0; outline-offset: 2px; }
a.rl2-ico-lnk:active { transform: scale(.94); }
/* Con reduced-motion no hay salto ni transicion: el cambio de fondo basta. */
@media (prefers-reduced-motion: reduce) {
  a.rl2-ico-lnk { transition: none; }
  a.rl2-ico-lnk:active { transform: none; }
}
.rl2-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rc, #8899aa); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex: 0 0 auto;
}
.rl3-t {
  margin: 0; font-size: 19px; line-height: 26px; font-weight: 700;
  color: var(--hp-blue, #004FA0);
}
.rl3-progreso {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--hp-muted, #54657a);
}
/* Los avisos de la tabla de decision -- ningun 10, ceros o dieces sueltos --
   se suman al caso general; no lo sustituyen. */
.rl3-aviso {
  margin: 0; font-size: 14.5px; line-height: 22px; color: var(--hp-text);
  padding-left: 14px; border-left: 3px solid var(--hp-line, #C9D9E8);
  max-width: 78ch;
}
.rl3-ceros { border-left-color: #E9C900; }
.rl3-dieces { border-left-color: #16A63A; }
/* El icono canonico del area trae su propio circulo de color: nada detras. */
img.rl2-ico, img.hp-area-ico { background: none !important; border: 0; }
.rl2-card-p {
  margin: 0; font-size: 15px; line-height: 23px; color: var(--hp-text);
  overflow-wrap: anywhere;
}
.rl2-reflexion {
  margin: 0;
  background: var(--hp-blue-soft, #F3F7FC);
  border-left: 4px solid var(--hp-blue, #004FA0);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 16px; line-height: 24px; color: var(--hp-heading, #1f2d3d);
  font-weight: 600;
}
.rl2-nota {
  margin: 0;
  border-top: 1px solid var(--hp-divider);
  padding-top: 14px;
  font-size: 13px; line-height: 19px; color: #718397;
  max-width: 90ch;
}
@media (max-width: 767px) {
  .rl2 { gap: 16px; }
  .rl2-intro { font-size: 16px; line-height: 24px; }
  /* Apiladas: dos columnas de 170 px no caben ni con nombres cortos. */
  .rl2-cards { grid-template-columns: 1fr; gap: 12px; }
  .rl2-reflexion { padding: 12px 14px; font-size: 15px; line-height: 23px; }
}
/* Las reglas del bloque anterior repartian parrafos sueltos en dos columnas
   y los cortaban a 60ch. Con la maqueta nueva sobran -- y ademas ganaban por
   especificidad: la franja de reflexion y la nota salian a media anchura. */

/* ===== §15.6 Profundiza en un área (subruedas.js pinta en #hp-subruedas) ==
   El id gana en especificidad al CSS que inyecta subruedas.js (.hp-sub …);
   los estilos inline del JS (colores por área) se pisan con !important puntual. */
/* item 3: respiración de 48px respecto a la tarjeta de interpretación */
#hp-subruedas.hp-sub, #hp-subruedas { margin-top: 36px; }
/* item 4: título de sección 24/30 azul; "— tu Mapa de la Vida" secundario en la línea base */
#hp-subruedas .hp-lectura-h { align-items: baseline; }
#hp-subruedas .hp-lectura-h span {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: #718397 !important;
  margin-left: 8px;
}
/* item 5: pestañas 52px, contenido a su aire (sin 8 fracciones forzadas) */
#hp-subruedas .hp-sub-tabs {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px 2px 0;
  margin-bottom: 0;
}
#hp-subruedas .hp-sub-tab {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--hp-border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--hp-surface-blue);
  cursor: pointer;
}
/* Las ocho areas CABEN en una fila desde 1200px: rejilla explicita, sin
   min-width que desborde (era la causa de la barra nativa y del corte). */
@media (min-width: 1200px) {
  #hp-subruedas .hp-sub-tabs {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px; overflow: visible;
  }
  #hp-subruedas .hp-sub-tab { min-width: 0; padding: 8px 7px; gap: 6px; }
  #hp-subruedas .hp-sub-tab .ci { width: 22px; height: 22px; flex: 0 0 22px; font-size: 11px; }
  #hp-subruedas .hp-sub-tab .nm {
    font-size: 11.5px; line-height: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}
/* 768-1199: carril de una fila, sin la barra gris del navegador */
@media (min-width: 768px) and (max-width: 1199px) {
  #hp-subruedas .hp-sub-tabs {
    /* A este ancho las ocho areas no caben en una fila: en ingles el
       contenido mide 909 px en una caja de 738 y "Leisure" y "Home" se
       quedaban fuera de la vista. Un carril que se desplaza de lado esconde
       parte de la Rueda a quien navega con raton, asi que aqui ENVUELVE:
       dos filas, las ocho visibles. (Ficha de April 20260811-162535) */
    flex-wrap: wrap; overflow: visible;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  /* Si ya no hay nada escondido a los lados, la mascara de "hay mas" mentiria
     y ademas difumina la ultima pestana de cada fila. */
  #hp-subruedas .hp-sub-tabs.mas-der,
  #hp-subruedas .hp-sub-tabs.mas-izq,
  #hp-subruedas .hp-sub-tabs.mas-izq.mas-der { mask-image: none; }
  #hp-subruedas .hp-sub-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
  #hp-subruedas .hp-sub-tab { scroll-snap-align: start; min-width: 0; }
  /* pista discreta de que queda contenido a los lados */
  #hp-subruedas .hp-sub-tabs.mas-der { mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
  #hp-subruedas .hp-sub-tabs.mas-izq { mask-image: linear-gradient(to left, #000 88%, transparent 100%); }
  #hp-subruedas .hp-sub-tabs.mas-izq.mas-der { mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }
}
/* el selector compacto solo existe en movil */
#hp-subruedas .hp-sub-selector { display: none; }
@media (max-width: 767px) {
  #hp-subruedas .hp-sub-tabs { display: none; }
  #hp-subruedas .hp-sub-selector { display: block; margin: 0 0 10px; }
  #hp-subruedas .hp-sub-selector label {
    display: block; font-size: 13px; font-weight: 600; color: var(--hp-heading); margin: 0 0 6px;
  }
  #hp-subruedas .hp-sub-selector select {
    width: 100%; min-height: 48px; padding: 0 38px 0 12px;
    border: 1px solid var(--hp-border-strong); border-radius: 10px; background-color: var(--hp-white);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='%230057A8'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
    appearance: none; -webkit-appearance: none;
    font-family: "Roboto", Arial, sans-serif; font-size: 15px; color: var(--hp-text);
  }
  #hp-subruedas .hp-sub-selector select:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 2px; }
  #hp-subruedas .hp-sub-panel { border-radius: 12px; }
}
#hp-subruedas .hp-sub-tab:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: -2px; }
/* el estado activo no se comunica solo con color */
#hp-subruedas .hp-sub-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .55); }
#hp-subruedas .hp-sub-tab .ci { width: 24px; height: 24px; flex: 0 0 24px; font-size: 12px; }
#hp-subruedas .hp-sub-tab .nm {
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: var(--hp-text);
  max-width: none;
  white-space: normal;
}
/* item 6: la activa en azul de marca, conectada al panel sin salto */
#hp-subruedas .hp-sub-tab.on { background: var(--hp-blue) !important; border-color: var(--hp-blue); }
#hp-subruedas .hp-sub-tab.on .nm { color: var(--hp-white); font-weight: 700; }
#hp-subruedas .hp-sub-panel {
  border: 1px solid var(--hp-border-strong);
  border-top: 3px solid var(--hp-blue) !important;
  border-radius: 0 12px 12px 12px;
  padding: 18px 20px 0;
  background: var(--hp-white);
  margin-top: 0;
}
/* item 9: subrueda y filas centradas verticalmente */
#hp-subruedas .hp-sub-cols {
  /* Escritorio: rueda GRANDE y lista a la derecha (Pedro, 2026-08-05). La
     columna anterior encogio la rueda al ensancharse el viewBox de las
     etiquetas. El movil (media de abajo) sigue apilado a 1fr. */
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 40px;
}
/* ESTA REJILLA TENIA DOS DUENOS, Y GANABA EL EQUIVOCADO (Pedro, 28/08/2026:
   «las subruedas no son responsive»).

   `js/subruedas.js` trae su propia hoja y apila a una columna por debajo de
   1023px, que es el ancho a partir del cual la rueda de 480px y una lista
   legible caben de verdad. Pero la regla de ARRIBA usa selector de id
   --`#hp-subruedas`, especificidad 1,1,0-- y le gana a la del componente
   --`.hp-sub .hp-sub-cols`, 0,2,0--; y la unica media que la apilaba estaba
   mas abajo, a 767px.

   Resultado medido en la banda 768-1023px: la rueda se quedaba clavada en
   480px y la lista se comia lo que sobrara.

       800px de ventana -> columnas 480px + 191px
       768px de ventana -> columnas 480px + 159px, y «Gastos futuros»
                           reducido a 83px de ancho por 48 de alto: partido
                           en varias lineas, que es lo que se veia.

   No se toca la del componente: se le hace caso. Esta media alinea el corte de
   la hoja con el suyo, para que los dos digan lo mismo. Lo de fondo --dos
   ficheros mandando sobre el mismo selector-- queda anotado aqui para que el
   dia que se toque uno se mire el otro. */
@media (max-width: 1023px) {
  #hp-subruedas .hp-sub-cols { grid-template-columns: 1fr; gap: 24px; }
}
/* items 7-8: fila de acción BLANCA (fuera la franja azul); el botón es la píldora */
#hp-subruedas .hp-sub-save {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  margin: 24px -24px 0;
  padding: 16px 24px 18px;
  border-top: 1px solid var(--hp-divider);
  background: var(--hp-white);
  border-radius: 0 0 12px 12px;
}
#hp-subruedas .hp-sub-save button {
  height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: var(--hp-radius-pill);
  background: var(--hp-blue) !important;
  color: var(--hp-white);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#hp-subruedas .hp-sub-save button:hover { background: var(--hp-blue-hover) !important; }
/* "Empezar de nuevo" = secundario §9.2, misma pareja Guardar/Empezar que la rueda principal */
#hp-subruedas .hp-sub-save { flex-wrap: wrap; }
#hp-subruedas .hp-sub-save button.hp-sub-reset {
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border-strong);
  color: var(--hp-blue);
}
#hp-subruedas .hp-sub-save button.hp-sub-reset:hover {
  background: var(--hp-surface-blue) !important;
  border-color: var(--hp-blue);
}


/* ===== Seccion 8: Navegacion secundaria por areas (paso_2 y paso_3) ======
   Version DEFINITIVA (peticion Pedro): fila compacta y sutil con bordes finos,
   reparto uniforme que CABE en el contenedor (sin tarjetas gigantes).
   Composicion estable [icono fondo][span.nm][span.cuantas]; ceros atenuados. */
/* Separacion por FILETE, no por sombra (patron de Facebook, 19/08). Dos
   barras apiladas con sombra crean dos «techos» y hunden la pagina; un filete
   de 1 px separa igual y no pesa. La sombra de la cabecera ya se cambio en
   head_privado.tpl; esta es la de la barra de areas, que vivia aparte. */
nav.ambitos.hp-areas-bar { margin: 24px 0 !important; padding: 4px 0 !important; box-shadow: none !important; }
nav.ambitos.hp-areas-bar ul,
nav.ambitos.hp-areas-bar ul *,
nav.ambitos.hp-areas-bar ul *::before,
nav.ambitos.hp-areas-bar ul *::after { box-sizing: border-box; }
nav.ambitos.hp-areas-bar ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
  padding: 2px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
}
nav.ambitos.hp-areas-bar ul li {
  float: none !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 48px;
  margin: 0 !important;
  display: flex;
  background: var(--hp-white) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
nav.ambitos.hp-areas-bar ul li a {
  width: 100%;
  min-height: 46px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 38px !important;
  font-size: 13px !important;
  line-height: 16px;
  font-weight: 500 !important;
  color: var(--hp-text) !important;
  text-decoration: none;
  background-repeat: no-repeat !important;
  background-size: 24px !important;
  background-position: left 8px center !important;
  border-radius: 9px;
}
nav.ambitos.hp-areas-bar ul li:hover {
  background: var(--hp-surface-blue) !important;
  border-color: var(--hp-border-strong) !important;
}
nav.ambitos.hp-areas-bar ul li a:focus-visible {
  outline: 3px solid rgba(22, 119, 210, 0.30);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Nombre del area: elemento flexible explicito, blindado ante reglas legacy */
nav.ambitos.hp-areas-bar ul li a .nm,
nav.ambitos.hp-areas-bar ul li a span.nm {
  position: static !important;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 16px !important;
  font-weight: inherit !important;
  text-align: left;
  box-shadow: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Los nombres largos reciben algo mas de crecimiento (solo escritorio ancho,
   donde se muestran todas las etiquetas; la fila sigue cabiendo) */
@media (min-width: 1200px) {
  nav.ambitos.hp-areas-bar ul li:has(> a.desarrollo),
  nav.ambitos.hp-areas-bar ul li:has(> a.trabajo),
  nav.ambitos.hp-areas-bar ul li:has(> a.crecimiento) { flex-grow: 1.35 !important; }
  nav.ambitos.hp-areas-bar ul li:has(> a.familia) { flex-grow: 1.15 !important; }
}
/* Contador: pill discreta dentro del chip */
nav.ambitos.hp-areas-bar ul li a span.cuantas {
  position: static !important;
  order: 2;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 20px !important;
  width: auto !important;
  height: 20px !important;
  line-height: 1 !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--hp-blue-soft) !important;
  color: var(--hp-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-align: center;
}
nav.ambitos.hp-areas-bar ul li a span.cuantas.is-zero {
  background: var(--hp-surface-blue) !important;
  color: #8392A3 !important;
}
/* Activa: sutil pero clara (fondo azul suave + borde azul fino + texto 700) */
nav.ambitos.hp-areas-bar ul li.active {
  background: var(--hp-blue-soft) !important;
  border-color: var(--hp-blue) !important;
}
nav.ambitos.hp-areas-bar ul li.active a { color: var(--hp-blue) !important; font-weight: 700 !important; }
nav.ambitos.hp-areas-bar ul li.active a span.cuantas,
nav.ambitos.hp-areas-bar ul li.active a span.cuantas.is-zero {
  background: var(--hp-blue) !important;
  color: var(--hp-white) !important;
}

/* Banda intermedia (768-1199): contenedores de 750/970 no dan para 8 etiquetas.
   Chips de icono+contador y la ACTIVA expandida con su nombre: cabe siempre, sin cortes. */
@media (min-width: 768px) and (max-width: 1199px) {
  nav.ambitos.hp-areas-bar ul { gap: 6px; }
  nav.ambitos.hp-areas-bar ul li { flex: 0 1 auto !important; min-height: 44px; }
  nav.ambitos.hp-areas-bar ul li a { min-height: 42px; padding: 6px 9px 6px 38px !important; }
  nav.ambitos.hp-areas-bar ul li:not(.active) a .nm { display: none !important; }
  nav.ambitos.hp-areas-bar ul li.active a .nm { font-size: 12px !important; line-height: 14px !important; }
}
/* Alpha 3: entre 992 y 1199 si hay sitio de sobra -medido: el ul ocupaba 940
   de 1114 y solo el chip activo mostraba nombre-. Los ocho chips se reparten
   el ancho completo y muestran su nombre, recortado con elipsis si hiciera
   falta. Por debajo de 992 se mantiene la fila compacta solo-icono. */
@media (min-width: 992px) and (max-width: 1199px) {
  nav.ambitos.hp-areas-bar ul li { flex: 1 1 0 !important; }
  nav.ambitos.hp-areas-bar ul li a { padding: 6px 8px 6px 34px !important; }
  nav.ambitos.hp-areas-bar ul li a .nm,
  nav.ambitos.hp-areas-bar ul li:not(.active) a .nm {
    display: block !important; font-size: 11.5px !important; line-height: 14px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  nav.ambitos.hp-areas-bar ul li a span.cuantas { flex: 0 0 auto; }
}

/* ===== Seccion 16: Pantalla "Que quiero en mi vida" =============================== */
/* 16.1 Bloque para anadir: tarjeta suave */
.add-deseos {
  background: var(--hp-surface-blue);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 24px;
  margin: 0 0 32px;
}
.add-deseos .nuevo { height: auto; }
.add-deseos .nuevo .form-group {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 0;
}
.add-deseos .nuevo input[type="text"] {
  height: 48px;
  min-height: 48px;
  border: 1px solid #C7D6E5;
  border-radius: 10px;
  font-size: 16px;
  padding: 11px 14px;
}
/* Boton Anadir: primario con texto (fuera el "+" gigante) */
.add-deseos input.btn-add {
  position: static;
  min-width: 112px;
  width: auto;
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--hp-blue);
  border-radius: var(--hp-radius-pill);
  background-color: var(--hp-blue);
  background-image: none;
  color: var(--hp-white);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.add-deseos input.btn-add:hover { background-color: var(--hp-blue-hover); }
/* Desplegable de sugerencias del buscador: OCULTO por defecto (era la barra
   vacia parasita) y anclado bajo el campo pisando el top/left que fija el JS */
.add-deseos .nuevo .autocomplete {
  display: none;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0;
  z-index: 1000;
}
.add-deseos .nuevo .autocomplete .apertura,
.add-deseos .nuevo .autocomplete .cierre { display: none; }
.add-deseos .nuevo .autocomplete .cont {
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: 10px;
  box-shadow: var(--hp-shadow-hover);
  overflow: hidden;
}
.add-deseos .nuevo .autocomplete ul li {
  background: var(--hp-white);
  border: 0;
  border-bottom: 1px solid var(--hp-divider);
  font-size: 15px;
  line-height: 22px;
}
.add-deseos .nuevo .autocomplete ul li:last-child { border-bottom: 0; }
.add-deseos .nuevo .autocomplete ul li a { display: block; min-height: 44px; padding: 10px 12px; color: var(--hp-text); text-decoration: none; }
.add-deseos .nuevo .autocomplete ul li:hover { background: var(--hp-surface-blue); }
/* 16.2 Catalogo de opciones */
.add-deseos .archivo {
  margin-top: 16px;
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: 10px;
  overflow: hidden;
}
.add-deseos .archivo > .form-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 8px 6px 0;
}
.add-deseos .archivo .f-input {
  float: none;
  flex: 1;
  width: auto;
  padding: 10px 0 10px 14px;
  font-size: 16px;
  line-height: 24px;
  color: var(--hp-text);
}
/* Acciones del catalogo: cajas tactiles 44x44 (spec seccion 12) */
.add-deseos .archivo input.btn-add,
.add-deseos input.btn-remove {
  position: static;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: transparent;
  background-position: center;
  background-size: 22px;
  background-repeat: no-repeat;
}
.add-deseos .archivo input.btn-add { background-image: url("images/icon-add.svg"); }
/* Papelera del catalogo ("Busca en nuestro catalogo de opciones"): el icono
   legacy era rojo y se veia diminuto. Papelera lineal neutra de 21px dentro de
   la caja tactil de 44x44; el rojo se reserva para borrados destructivos. */
.add-deseos .archivo input.btn-remove,
.add-deseos input.btn-remove {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235B6B82'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='3%206%205%206%2021%206'/%3E%3Cpath%20d='M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'/%3E%3Cline%20x1='10'%20y1='11'%20x2='10'%20y2='17'/%3E%3Cline%20x1='14'%20y1='11'%20x2='14'%20y2='17'/%3E%3C/svg%3E") !important;
  background-size: 21px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  border-radius: 10px;
  align-self: center;
}
.add-deseos input.btn-remove:focus-visible { outline: 2px solid var(--hp-blue, #004FA0); outline-offset: 2px; }
.add-deseos .archivo input.btn-add:hover,
.add-deseos input.btn-remove:hover { background-color: var(--hp-surface-blue); border-color: var(--hp-border); }
.add-deseos .archivo .construir {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px 12px;
}
.add-deseos .archivo .construir .form-group { margin: 0; display: inline-flex; align-items: center; }
.add-deseos .archivo .construir .form-group > span {
  font-size: 16px; margin: 0 2px;   /* simetrico: antes solo a la derecha, y el
       conector quedaba soldado al desplegable de su izquierda (25/08) */
  display: inline-flex; align-items: center; min-height: 40px;
}
/* Selects del constructor: NATIVOS y legibles (flecha del sistema de vuelta;
   el appearance:none legacy + fondo plano los dejaba minusculos y sin flecha) */
.add-deseos .archivo .construir select {
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: auto !important;
  min-height: 40px;
  height: 40px !important;
  width: auto;
  min-width: 88px;
  max-width: 100%;
  padding: 6px 10px !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 10px !important;
  background-color: var(--hp-white) !important;
  background-image: none !important;
  font-size: 15px !important;
  color: var(--hp-heading) !important;
}
/* opciones del desplegable: fuera el hack legacy display:table-caption */
.add-deseos .archivo .construir select option {
  display: block !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 6px 10px;
  font-size: 15px;
}
/* si el constructor esta vacio no debe dejar franja residual */
.add-deseos .archivo .construir:empty { display: none; }
/* 16.3 Columnas de clasificacion */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch; /* las 3 columnas a la altura de la mas larga */
  margin: 0 0 48px;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) > h2,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) > .hp-leyenda-estado { grid-column: 1 / -1; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado {
  float: none;
  width: auto;
  padding: 12px;
  background: var(--hp-surface-soft);
  border: 1px solid var(--hp-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
/* la zona de arrastre ocupa todo el alto disponible: el vacio es destino de drop */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul { flex: 1 1 auto; }
/* Cabeceras de columna: fondo suave, no bloques saturados */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado h3 {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  border: 0 !important;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado h3.col-sin { background: #EEF2F6 !important; color: #526579 !important; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado h3.col-nec { background: var(--hp-blue-soft) !important; color: var(--hp-blue) !important; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado h3.col-mot { background: var(--hp-success-soft) !important; color: var(--hp-success) !important; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul { border-top: 0; min-height: 52px; margin: 0; padding: 0; }
/* 16.4 Tarjeta de condicion */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 10px 46px 10px 68px !important;
  margin: 0 0 8px !important;
  background: var(--hp-white) !important;
  border: 1px solid #DCE6F0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 14px;
  line-height: 19px;
  color: #263A4E;
  text-align: left;
}
/* Asa de arrastre: disparador exclusivo del sortable (clase .move intacta),
   siempre pulsable por encima de cualquier capa y sin gestos tactiles que interfieran */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .move {
  left: 8px;
  top: 50%;
  width: 22px;
  height: 32px;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
}
/* Es un control (cambia el estado): tamano 28, anillo al pasar, focus visible */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks .btn-ok,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks .btn-no-ok {
  width: 28px;
  height: 28px;
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow 160ms ease;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks .btn-ok:hover,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks .btn-no-ok:hover {
  box-shadow: 0 0 0 3px rgba(0, 79, 160, 0.12);
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks .btn-ok:focus-visible,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks .btn-no-ok:focus-visible {
  outline: 3px solid rgba(22, 119, 210, 0.30);
  outline-offset: 2px;
}
/* Acciones a la derecha: caja tactil 32x32, icono papelera claro (no la X ambigua) */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  position: absolute;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions span,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions > div {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  display: inline-block;
  cursor: pointer;
  transition: background-color .15s;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions span:hover,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions > div:hover { background-color: var(--hp-blue-soft); }
/* micro: papelera lineal (Trash-2) 21px en area tactil 44x44; estados
   hover/focus en rojo suave; foco visible; sin tocar la logica de borrado. */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: transparent;
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-block;
  cursor: pointer;
  transition: background-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235B6B82'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='3%206%205%206%2021%206'/%3E%3Cpath%20d='M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'/%3E%3Cline%20x1='10'%20y1='11'%20x2='10'%20y2='17'/%3E%3Cline%20x1='14'%20y1='11'%20x2='14'%20y2='17'/%3E%3C/svg%3E");
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:hover,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:focus-visible {
  background-color: var(--hp-danger-soft);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23E2372F'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='3%206%205%206%2021%206'/%3E%3Cpath%20d='M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'/%3E%3Cline%20x1='10'%20y1='11'%20x2='10'%20y2='17'/%3E%3Cline%20x1='14'%20y1='11'%20x2='14'%20y2='17'/%3E%3C/svg%3E");
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:focus-visible {
  outline: 2px solid var(--hp-danger, #E2372F);
  outline-offset: 2px;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:active {
  background-color: rgba(226, 55, 47, .16);
  transform: scale(.94);
}
/* Zona vacia de arrastre */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado span.vacio {
  display: block;
  padding: 14px 12px;
  background: #FBFDFF;
  border: 1px dashed #C7D6E5;
  border-radius: 10px;
  color: var(--hp-text-muted);
  font-size: 13px;
  margin: 0;
}
/* 16.6 Bloque de analisis (condiciones.js pinta en #hpq-mount) */
:is(#hpq-mount, #hpc-mount) .hpq-alerta {
  background: var(--hp-white);
  border: 1px solid var(--hp-border-strong);
  border-left: 4px solid var(--hp-blue);
  border-radius: 12px;
  min-height: 72px;
  padding: 16px 20px;
  gap: 16px;
}
:is(#hpq-mount, #hpc-mount) .hpq-alerta .big { font-size: 30px; line-height: 34px; font-weight: 700; }
:is(#hpq-mount, #hpc-mount) .hpq-alerta .txt { font-size: 14px; line-height: 21px; }

/* ===== Pantalla 3: Que quiero cambiar (hp-page-step-3) ==================== */
/* Lapiz y bombilla: 32x32 en escritorio, iconos legacy nitidos, separadas 4px */
.add-premios-ordenacion .listado ul li { padding-right: 84px !important; }
.add-premios-ordenacion .listado ul li .actions .cambio-nuevo,
.add-premios-ordenacion .listado ul li .actions .cambio-sugerir {
  width: 32px;
  height: 32px;
  background-size: 20px;
}
/* La zona de drop de P3 con alto minimo mayor (columnas igualadas via :is) */
.add-premios-ordenacion .listado ul.connectedSortable { min-height: 120px; }

/* --- Cambios ya marcados (ul.cambios): fila-tarjeta blanca en escritorio ---
   Hooks intactos: .oks .cambio .twittear .fecha .premio .btn-remove li.vacio */
ul.cambios { list-style: none; margin: 0; padding: 0; border-top: 0; }
ul.cambios li {
  display: grid;
  grid-template-columns: 40px minmax(240px, 1fr) 120px minmax(150px, 220px) 44px 44px;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  margin: 0 0 8px;
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: 10px;
  overflow: visible;
  clear: none;
}
/* neutralizar los floats col-md legacy dentro de la fila */
ul.cambios li > div { float: none; width: auto; padding: 0; position: static; }
/* orden visual: estado | cambio | fecha | premio | compartir | eliminar
   (el DOM trae twitter antes que fecha: se recoloca por columna de rejilla) */
ul.cambios li > .oks { grid-column: 1; }
ul.cambios li > .cambio { grid-column: 2; font-size: 14px; line-height: 19px; color: #263A4E; }
ul.cambios li > .fecha { grid-column: 3; font-size: 13px; line-height: 18px; color: #526579; }
ul.cambios li > .premio { grid-column: 4; font-size: 13px; line-height: 18px; color: #526579; }
ul.cambios li > .twitter { grid-column: 5; }
ul.cambios li > .borrar { grid-column: 6; }
/* estado como control (mismo lenguaje que las condiciones) */
ul.cambios li .oks .btn-ok,
ul.cambios li .oks .btn-no-ok {
  width: 28px;
  height: 28px;
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-flex;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow 160ms ease;
}
ul.cambios li .oks .btn-ok:hover,
ul.cambios li .oks .btn-no-ok:hover { box-shadow: 0 0 0 3px rgba(0, 79, 160, 0.12); }
/* condicion asociada al cambio: mismo control ✓/✕ que en las condiciones, en compacto */
ul.cambios li .cambio .cond-af {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 17px;
  color: #526579;
}
ul.cambios li .cambio .cond-af .btn-ok,
ul.cambios li .cambio .cond-af .btn-no-ok {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background-size: 17px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow 160ms ease;
}
ul.cambios li .cambio .cond-af .btn-ok:hover,
ul.cambios li .cambio .cond-af .btn-no-ok:hover { box-shadow: 0 0 0 3px rgba(0, 79, 160, 0.12); }
ul.cambios li .cambio .cond-af .btn-ok:focus-visible,
ul.cambios li .cambio .cond-af .btn-no-ok:focus-visible {
  outline: 3px solid rgba(22, 119, 210, 0.30);
  outline-offset: 2px;
}
/* compartir: la X negra queda SOLO como icono de la red social */
ul.cambios li a.twittear {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-size: 16px !important;
}
/* eliminar: papelera clara en caja tactil (nada de X ambigua) */
/* Sin circulo ni caja: icono lineal desnudo en zona tactil (Pedro, movil
   2026-08-10: «te empenas en hacer circulos sobre la basura»). El estado
   hover/focus si pinta fondo, como pista de que es accionable. */
ul.cambios li .borrar .btn-remove {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%2364748B'%20d='M6%207h12l-1%2014H7L6%207zm3-3h6l1%202H8z'/%3E%3C/svg%3E") !important;
  background-size: 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
ul.cambios li .borrar .btn-remove:hover,
ul.cambios li .borrar .btn-remove:focus-visible,
ul.cambios li .borrar .btn-remove:active {
  background-color: var(--hp-danger-soft, #FDEAEA); border-color: #F0C4C0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23E2372F'%20d='M6%207h12l-1%2014H7L6%207zm3-3h6l1%202H8z'/%3E%3C/svg%3E") !important;
}
ul.cambios li.vacio {
  display: block;
  padding: 14px 12px;
  background: #FBFDFF;
  border: 1px dashed #C7D6E5;
  border-radius: 10px;
  color: var(--hp-text-muted);
  font-size: 13px;
}

/* ===== Resumen — Commit B: SOLO metricas superiores (hp-page-summary) =====
   Estructura real: ul.vista-rapida > li.img-perfil (avatar+lapiz) + 3 li > a(num+span).
   Neutraliza bootstrap width:25%/float:left de los hijos (leccion de la regresion:
   los porcentajes de bootstrap dentro de una pista de grid se calculan sobre la pista). */
.hp-page-summary ul.vista-rapida {
  display: grid;
  grid-template-columns: 140px repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin: 0 0 8px;
  padding: 0;
  overflow: visible;
  list-style: none;
}
.hp-page-summary ul.vista-rapida > li {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  height: auto;
  min-height: 112px;
  padding: 16px;
  background: var(--hp-white);
  border: 1px solid var(--hp-border) !important;   /* pisa el hair del head-inline */
  border-radius: 14px !important;
  box-shadow: none !important;
  position: relative;
  font-size: 16px; /* fuera el 30px legacy del li */
  overflow: hidden;
}
/* Centrado ROBUSTO (incidencia): el enlace ocupa la tarjeta y centra en columna */
.hp-page-summary ul.vista-rapida > li:not(.img-perfil) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hp-page-summary ul.vista-rapida > li:not(.img-perfil) > * {
  margin-top: 0;
  margin-bottom: 0;
}
.hp-page-summary ul.vista-rapida > li:not(.img-perfil) > a {
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  min-height: 0; /* inherit duplicaba el minimo del li + padding (lo cazo el assert de altura) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
  text-decoration: none;
  font-size: 40px !important;   /* cifra (el head-inline trae 800!important) */
  line-height: 44px !important;
  font-weight: 700 !important;
  color: var(--hp-blue) !important;
}
.hp-page-summary ul.vista-rapida > li:not(.img-perfil) > a span {
  display: block;
  margin: 0 !important;         /* head-inline le ponia margin-top:6px */
  font-size: 16px;
  line-height: 22px;
  font-weight: 500 !important;
  color: var(--hp-text) !important;
  white-space: normal;
}
/* Perfil: NO parece una cuarta metrica (superficie suave, silueta contenida) */
.hp-page-summary ul.vista-rapida > li.img-perfil {
  padding: 8px;
  background-color: var(--hp-surface-soft) !important;
  background-size: 88px auto !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
}
/* Lapiz: MISMO enlace/funcion, superficie tactil 44x44 dentro de la tarjeta */
.hp-page-summary ul.vista-rapida > li.img-perfil > a {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-size: 20px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.hp-page-summary ul.vista-rapida > li.img-perfil > a:hover { background-color: var(--hp-blue-soft); }

/* Tablet 768-1199 */
@media (min-width: 768px) and (max-width: 1199px) {
  .hp-page-summary ul.vista-rapida { grid-template-columns: 120px repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hp-page-summary ul.vista-rapida > li:not(.img-perfil) > a { font-size: 36px !important; line-height: 40px !important; }
  .hp-page-summary ul.vista-rapida > li:not(.img-perfil) > a span { font-size: 15px; line-height: 20px; }
}

/* ===== Resumen — separadores de MACROSECCION (hp-summary-section-title) ====
   Linea fina a todo el ancho + acento azul inicial ANTES de cada macroseccion
   (la 1a, 'Tu Rueda de la Vida hoy', no lleva). Sustituye a la regla inferior:
   el titulo pierde el border-bottom. Pisa el inline del head y el micro previo
   de 'Cambios pendientes' donde solapan (misma especificidad, esta va despues). */
:is(.hp-page-summary h2.encabezado.hp-summary-section-title, h2.hp-section-title),
#hp-subruedas > .hp-lectura-h {
  position: relative;
  margin: 32px 0 18px !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid #C9D9E8 !important;
  border-bottom: 0 !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  color: #0057A8 !important;
  background: none !important;
  display: block !important;
}
/* pasos numerados (P3): el circulo va dentro del titulo del patron, misma
   alineacion y tamano en los tres pasos y en todas las resoluciones.
   El circulo y el texto se alinean con FLEX, no con un vertical-align a ojo:
   el `-4px` de antes era un ajuste manual atado al tamano de fuente, y con
   otro cuerpo de letra o al envolver el titulo se descolocaba. */
/* Se nombran las TRES clases del elemento a proposito. El patron de
   macroseccion de mas abajo fija `display: block !important` con un
   `:is(.hp-page-summary h2.encabezado.hp-summary-section-title, ...)`, y esa
   rama vale (0,3,2): con `!important` en los dos lados gana la especificidad,
   no el orden, asi que un simple `h2.hp-section-title` (0,2,1) perdia y el
   titulo se quedaba en block. Con las tres clases sube a (0,4,1) y manda. */
:is(.hp-page-step-2, .hp-page-step-3) h2.titulo-seccion-desk.hp-seccion-h.hp-section-title {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 4px;
}
:is(.hp-page-step-2, .hp-page-step-3) h2.hp-section-title > span:not(.hp-step-num) {
  min-width: 0;
}
@media (max-width: 767px) {
  :is(.hp-page-step-2, .hp-page-step-3) h2.hp-section-title .hp-step-num { width: 24px; height: 24px; font-size: 13px; margin-right: 9px; }
}
/* primera macroseccion de una pantalla: sin linea ni acento (solo titulo) */
h2.hp-seccion-h.hp-section-title.hp-first { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
h2.hp-seccion-h.hp-section-title.hp-first::before { display: none !important; }
/* paso_1: el patron aporta el aire (se retira el margin-top 48 previo del bloque) */
#hp-subruedas.hp-sub, #hp-subruedas { margin-top: 0 !important; }
/* una sola fuente de separacion: el propio separador */
.hp-page-summary .estado-evolucion { margin-bottom: 0 !important; } /* legacy: 50px */
:is(.hp-page-summary h2.encabezado.hp-summary-section-title, h2.hp-section-title) + *,
#hp-subruedas > .hp-lectura-h + * { margin-top: 0 !important; }
.hp-page-summary .hp-hist details:last-child { margin-bottom: 0 !important; }
.hp-page-summary .cambios-pendientes li:last-child { margin-bottom: 0 !important; }
.hp-page-summary #hpq-mount .hpq-cards { margin-bottom: 0 !important; }
:is(.hp-page-summary h2.encabezado.hp-summary-section-title, h2.hp-section-title)::before,
#hp-subruedas > .hp-lectura-h::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 120px;
  height: 3px;
  background: #0057A8;
  border-radius: 999px;
}

/* ===== §18.5 Descargar resumen: alineado al borde derecho del ancho util ==
   (antes centrado con estilos inline; movil a ancho disponible) */
.hp-page-summary .hp-summary-download-row { margin: 24px 0 44px; text-align: center; }
@media (min-width: 768px) {
  .hp-page-summary .hp-summary-download-row { display: flex; justify-content: flex-end; }
  .hp-page-summary .hp-summary-download-row::before,
  .hp-page-summary .hp-summary-download-row::after { content: none; }
  .hp-page-summary .hp-summary-download-row .descarga-reporte,
  .hp-page-summary .hp-summary-download-row .descarga-reporte-mob { flex: 0 0 280px; max-width: 280px; margin: 0; }
}
@media (max-width: 767px) {
  .hp-page-summary .hp-summary-download-row .descarga-reporte-mob { max-width: 100%; }
}

/* ===== §18.6 FAQ (hp-page-faq): pagina de ayuda con el cromo actual =======
   Acordeon propio con button nativo (plegado por grid-rows 0fr, patron ya
   probado en el Resumen). Todo encapsulado bajo .hp-page-faq. */
/* cabecera publica minima para anonimos (misma barra clara del sistema) */
/* --- CABECERA REDUCIDA: los MISMOS valores que la barra de la portada -------
   Pedro, 2026-08-24, viendo la de las preguntas frecuentes: "por que no es
   como el de la home page? sale raro".

   Y tenia razon: eran dos barras distintas para lo mismo. Medido: borde
   #D6E2EE contra #E4EBF3, sin sombra, logo de 132 contra 150, sin el
   distintivo 2030, el boton de entrar como rectangulo de radio 10 en vez de
   pildora, y en Roboto en vez de Inter.

   NO se puede reutilizar header_publico.tpl directamente: esa barra esta
   construida sobre clases de Bootstrap, y head_privado.tpl --que es el que
   cargan estas cuatro paginas-- no carga bootstrap.min.css. Asi que lo que se
   comparte son los VALORES, no el marcado. Si algun dia se unifican de verdad,
   este bloque es el que sobra. */
/* Se queda arriba al bajar, como la de la portada (navbar-fixed-top).
   `sticky` y no `fixed`: ocupa su sitio y no obliga a compensar con
   padding-top en el body. z-index 1030 = el de navbar-fixed-top. */
.hp-page-faq .hp-faq-pubheader{ background:#fff; border-bottom:1px solid #E4EBF3; box-shadow:0 1px 3px rgba(7,19,31,.04); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; position:sticky; top:0; z-index:1030; }
.hp-page-faq .hp-faq-pubheader .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; padding-bottom:16px; }
.hp-page-faq .hp-faq-pubbrand{ display:block; width:150px; height:52px; background-size:contain; background-repeat:no-repeat; background-position:left center; font-size:0; color:transparent; overflow:hidden; flex:0 0 auto; }
/* El distintivo, con los mismos numeros que .hp2030-nav .ed */
.hp-page-faq .hp-faq-pubed{ display:inline-block; margin-left:-4px; font-size:11px; font-weight:800; letter-spacing:.08em; color:#004FA0; background:#EAF2FB; border:1px solid rgba(0,79,160,.22); border-radius:7px; padding:4px 8px; line-height:1; flex:0 0 auto; }
@media(max-width:480px){ .hp-page-faq .hp-faq-pubed{ display:none; } }
/* Entrar: la pildora fantasma de la portada (.hp2030-ghost), no un rectangulo.
   Se conserva el min-height de 44: la barra de la portada se queda en 38, y eso
   es un defecto suyo, no algo que copiar. */
.hp-page-faq .hp-faq-publogin{ display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:0; box-shadow:inset 0 0 0 1.5px rgba(0,79,160,.32); border-radius:100px; color:#004FA0; font-family:inherit; font-size:14.5px; font-weight:800; text-decoration:none; transition:box-shadow .15s, background .15s; flex:0 0 auto; }
.hp-page-faq .hp-faq-publogin:hover{ box-shadow:inset 0 0 0 1.5px #004FA0; background:#EAF2FB; color:#004FA0; }
.hp-page-faq .hp-faq-publogin:focus-visible{ outline:2px solid var(--hp-focus, var(--hp-blue)); outline-offset:2px; }
@media (max-width: 767px) {
  .hp-page-faq .hp-faq-pubbrand { width: 44px; background-image: url("/images/ico/icono-felicidad.png") !important; }
}

.hp-page-faq .hp-faq { max-width: 900px; margin-top: 8px; }

/* ===== El riel de secciones de las FAQ ====================================
   Pedro, 25/08: "las FAQs deberia tener un segundo menu que fuera avanzando
   como el resumen". Mismo patron que .hp-riel de resumen.tpl --fila de
   pestanas pegada bajo la cabecera-- escrito aparte porque aquel vive EN
   LINEA dentro de resumen.tpl y esta pagina no lo ve. Si algun dia se
   unifican, este bloque es el que sobra.

   SIN desplazamiento lateral, igual que el del Resumen (Pedro, 08/08:
   "deberia quedarse estatico"). Por debajo de 900px se queda el icono y el
   rotulo solo en el activo: se lee siempre donde estas, sin perder de vista
   los demas destinos y sin una tira que arrastrar. */
.hp-page-faq .hp-faq-riel-barra{ position:sticky; top:var(--hp-cab-alto,66px); z-index:39;
  margin:0 0 22px; background:#fff; border-bottom:1px solid #E4EBF3; padding:9px 0 8px; }
/* Se DESPLAZA, no se aplasta. Con `flex:1 1 auto` los botones se encogian
   por debajo de su texto y, al llevar `white-space:nowrap` sin overflow, el
   texto se salia de su caja y caia sobre el icono del boton vecino. Pasaba
   en ingles y en frances, donde las etiquetas son mas largas. (2026-08-25) */
.hp-page-faq .hp-faq-riel{ list-style:none; margin:0; padding:0 0 2px; display:flex;
  flex-wrap:nowrap; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none; }
.hp-page-faq .hp-faq-riel::-webkit-scrollbar{ display:none; }
.hp-page-faq .hp-faq-riel li{ flex:0 0 auto; }
.hp-page-faq .hp-faq-riel a{ display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:44px; padding:9px 14px; border:1px solid #E4EBF3; border-radius:12px;
  background:#fff; color:#5B6B82; font-size:14px; font-weight:600; white-space:nowrap;
  text-decoration:none !important; transition:background .15s, color .15s, border-color .15s; }
.hp-page-faq .hp-faq-riel svg{ flex:0 0 auto; width:21px; height:21px; fill:none;
  stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hp-page-faq .hp-faq-riel a:hover{ background:#EAF2FB; color:#004FA0; }
.hp-page-faq .hp-faq-riel a:focus-visible{ outline:2px solid #004FA0; outline-offset:2px; }
.hp-page-faq .hp-faq-riel a[aria-current="true"]{ background:#004FA0; border-color:#004FA0; color:#fff; }
/* Hasta 1023px, no 900: el corte tiene que ser el MISMO que el de las dos
   columnas, o queda una franja --de 901 a 1023-- con el carril tumbado, las
   etiquetas completas y las pildoras saliendose por la derecha. Medido a
   984px, que es uno de los anchos de la lista: se recortaba. (28/08/2026) */
@media (max-width:1023px){
  .hp-page-faq .hp-faq-riel a{ padding:9px 10px; gap:0; }
  .hp-page-faq .hp-faq-riel .hp-faq-riel-et{ display:none; }
  .hp-page-faq .hp-faq-riel a[aria-current="true"]{ gap:10px; }
  .hp-page-faq .hp-faq-riel a[aria-current="true"] .hp-faq-riel-et{ display:inline; }
}
@media (prefers-reduced-motion:reduce){
  .hp-page-faq .hp-faq-riel a{ transition:none; }
}

/* --- EL MENU, A LA IZQUIERDA EN PANTALLA ANCHA (Pedro, 28/08/2026) --------
   El riel nacio como barra horizontal pegada bajo la cabecera. Funciona en
   movil, pero a 1440px dejaba media pantalla vacia a la izquierda mientras las
   pildoras se salian por la derecha, cortadas. De pie ocupa ese hueco, cabe
   entero sin recortar y deja ver la lista completa de categorias.

   Se hace SOLO con CSS sobre el mismo marcado: los enlaces son los de antes,
   siguen funcionando sin JavaScript y el orden de lectura no cambia --el menu
   ya venia antes que el contenido--.

   El corte va en 1024px, el mismo que usan las paginas legales para su indice:
   dos sitios con la misma decision deben romper a la vez, o el sitio se ve
   distinto segun por donde entres. */
@media (min-width: 1024px) {
  .hp-page-faq .hp-faq-layout {
    display: grid;
    grid-template-columns: minmax(220px, 268px) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  /* Deja de ser una barra: ni fondo, ni raya, ni el z-index alto que
     necesitaba para pasar por encima del contenido al desplazarse. */
  .hp-page-faq .hp-faq-riel-barra {
    top: calc(var(--hp-cab-alto, 66px) + 22px);
    z-index: 1;
    margin: 0;
    padding: 0;
    background: none;
    border-bottom: 0;
  }
  .hp-page-faq .hp-faq-riel {
    flex-direction: column;
    gap: 4px;
    padding: 0;
    overflow: visible;   /* en columna no hay nada que arrastrar */
  }
  .hp-page-faq .hp-faq-riel a {
    justify-content: flex-start;
    text-align: left;
    white-space: normal;   /* en vertical si puede partir: hay sitio */
    border-color: transparent;
    background: none;
    padding: 10px 13px;
  }
  .hp-page-faq .hp-faq-riel a:hover { background: #EAF2FB; }
  /* Y el contenedor se ensancha para que quepan las dos columnas. Con los
     900px de una sola, el menu se comia un tercio del texto: quitar hueco
     vacio por la izquierda para quitarselo al contenido no arregla nada.
     El texto de las respuestas SI se queda en medida de lectura --no la
     tenia-- porque una linea de 800px se pierde al volver al margen. */
  .hp-page-faq .hp-faq { max-width: 1120px; }
  .hp-page-faq .hp-faq-body { max-width: 68ch; }
}
/* El hueco que dejan las DOS barras pegadas arriba (cabecera + riel). Lo
   calcula el guion, porque el alto de la cabecera cambia con el idioma y con
   si hay sesion o no. */
.hp-page-faq .hp-faq-bloque{ scroll-margin-top:var(--hp-hueco-arriba,150px); }

/* --- FAQ, mismo lenguaje que las paginas legales (28/08/2026) --------------
   Se trae la tipografia y el aire del prototipo /revision-premium-2030/, NO su
   marcado ni su mecanica: aquel usa `<details>` nativo y aqui hay un acordeon
   propio con `aria-expanded` que ya funciona bien y que Codex verifico. No se
   cambia lo que funciona; se cambia como se ve.
   El hero del FAQ es la BANDA COMUN (`.hp-doc-banda`, mas abajo), igual que el
   aviso legal y la privacidad: en el prototipo las paginas de utilidad la
   llevan todas, y es lo que hace que se reconozcan al entrar.

   Aqui NO se redefinen ni el epigrafe, ni el titular, ni la entradilla. Los
   tenia, y era un error silencioso: `.hp-page-faq .hp-faq-h1` gana por
   especificidad a `.hp-doc-banda h1`, asi que el FAQ salia con un titular de
   54 px donde el aviso legal llegaba a 106. Se veia bien --por eso no salto--,
   pero rompia el patron. La banda pone la tipografia de las tres paginas; aqui
   solo queda el color, mas abajo. */
/* LISTA CON REGLAS, NO TARJETAS. Una caja por pregunta convierte una lectura
   corrida en una rejilla, y con 40 preguntas cansa. Una raya arriba separa
   igual de bien y desaparece cuando no hace falta mirarla. */
.hp-page-faq .hp-faq-item {
  background: none;
  border: 0;
  border-top: 1px solid #E4EBF3;
  border-radius: 0;
  margin-bottom: 0;
}
.hp-page-faq .hp-faq-item:first-child { border-top: 0; }
.hp-page-faq .hp-faq-q { margin: 0; padding: 0; border: 0; background: none; }
.hp-page-faq .hp-faq-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 21px 44px 21px 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: Inter, "Roboto", Arial, sans-serif;
  font-size: clamp(16.5px, 1.5vw, 20px);
  line-height: 1.35;
  letter-spacing: -.012em;
  font-weight: 750;
  color: #07131F;
  text-align: left;
  cursor: pointer;
}
.hp-page-faq .hp-faq-toggle:hover { color: #0B4F91; }
.hp-page-faq .hp-faq-toggle:focus-visible { outline: 2px solid var(--hp-focus, var(--hp-blue)); outline-offset: 2px; }
.hp-page-faq .hp-faq-qtxt { flex: 1 1 auto; }
.hp-page-faq .hp-faq-chev { flex: 0 0 auto; color: var(--hp-blue); transition: transform .18s ease; }
.hp-page-faq .hp-faq-toggle[aria-expanded="true"] .hp-faq-chev { transform: rotate(180deg); }
.hp-page-faq .hp-faq-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .2s ease;
}
.hp-page-faq .hp-faq-panel > .hp-faq-body { min-height: 0; overflow: hidden; }
.hp-page-faq .hp-faq-panel.hp-cerrada { grid-template-rows: 0fr; }
.hp-page-faq .hp-faq-panel.hp-cerrada > .hp-faq-body { visibility: hidden; max-height: 0; }
.hp-page-faq .hp-faq-body {
  padding: 0 44px 0 0;
  color: #34475C;
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 74ch;
}
.hp-page-faq .hp-faq-panel:not(.hp-cerrada) > .hp-faq-body { padding-bottom: 18px; }
.hp-page-faq .hp-faq-body p { margin: 0 0 14px; }
.hp-page-faq .hp-faq-body img, .hp-page-faq .hp-faq-body iframe { max-width: 100%; display: block; margin: 14px auto; }

/* ─── PREGUNTAS FRECUENTES: bloques con icono, y las ocho areas ──────────────
   Pedro, 2026-08-24: "necesito que en las FAQS haya alguna imagen, porque queda
   muy pobre" y, precisando, "podrias poner iconos que tenemos algo mas grande".
   Ninguno es nuevo: los de bloque son los cuatro dibujos de la barra del portal
   (mas un libro con el mismo trazo) y los de area son las insignias del producto.

   DOS TRATAMIENTOS, uno por papel. El primer intento uso mascaras CSS para los
   dos y en pantalla salieron DISCOS MACIZOS: los iconos de area no son glifos,
   son insignias completas --un <circle r="64"> de color con el dibujo blanco
   encima--, asi que de mascara tapan el circulo entero. Por eso la insignia va
   con <img>, que es lo que es, y el glifo va en linea con stroke. */
.hp-page-faq .hp-faq-bloque{ display:flex; align-items:center; gap:16px; margin:46px 0 20px; padding-top:28px; border-top:1px solid var(--hp-hair,#E2E8F0); }
.hp-page-faq .hp-faq-bloque:first-of-type{ border-top:0; padding-top:0; margin-top:22px; }
.hp-page-faq .hp-faq-bico{ flex:0 0 auto; width:64px; height:64px; border-radius:50%; background:var(--hp-blue-soft,#F3F7FC); display:grid; place-items:center; color:var(--hp-blue,#004FA0); }
.hp-page-faq .hp-faq-bico svg{ width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
.hp-page-faq .hp-faq-btit{ margin:0; font-size:23px; line-height:1.22; font-weight:800; letter-spacing:-.015em; color:var(--hp-ink,#0F172A); }

.hp-page-faq .hp-faq-areas{ list-style:none; margin:0 0 30px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px 12px; }
.hp-page-faq .hp-faq-areas li{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font-size:13.5px; font-weight:600; line-height:1.3; color:#33445A; }
.hp-page-faq .hp-faq-aico{ width:58px; height:58px; display:block; }

/* La lista de las ocho areas DENTRO de una respuesta (pregunta 70). El icono
   lo pone el CSS a partir de la clase que cada <li> lleva en la base de datos:
   la columna `respuesta` es HTML, asi que el marcado se guarda ahi.
   Pedro, 2026-08-24: "¿y en esta pregunta no puedes poner los iconos?".
   Si la clase no estuviera, la lista se ve como cualquier otra: nada de lo que
   hay que leer depende de esto. */
.hp-page-faq .hp-lista-areas{ list-style:none; margin:0 0 16px; padding:0; }
.hp-page-faq .hp-lista-areas li{ position:relative; padding-left:46px; min-height:34px; margin-bottom:13px; }
.hp-page-faq .hp-lista-areas li::before{ content:""; position:absolute; left:0; top:1px; width:34px; height:34px; background:var(--ic) center/contain no-repeat; }
.hp-page-faq .hp-lista-areas li.ar-amor{ --ic:url('/styles/images/icon-amor.svg?v=color-20260824'); }   /* Amor */
.hp-page-faq .hp-lista-areas li.ar-ocio{ --ic:url('/styles/images/icon-ocio.svg?v=color-20260824'); }   /* Ocio */
.hp-page-faq .hp-lista-areas li.ar-hogar{ --ic:url('/styles/images/icon-hogar.svg?v=color-20260824'); }   /* Hogar */
.hp-page-faq .hp-lista-areas li.ar-salud{ --ic:url('/styles/images/icon-salud.svg?v=color-20260824'); }   /* Salud */
.hp-page-faq .hp-lista-areas li.ar-crecimiento{ --ic:url('/styles/images/icon-crecimiento.svg?v=color-20260824'); }   /* Crecimiento personal */
.hp-page-faq .hp-lista-areas li.ar-dinero{ --ic:url('/styles/images/icon-dinero.svg?v=color-20260824'); }   /* Dinero */
.hp-page-faq .hp-lista-areas li.ar-desarrollo{ --ic:url('/styles/images/icon-desarrollo.svg?v=color-20260824'); }   /* Desarrollo profesional */
.hp-page-faq .hp-lista-areas li.ar-familia{ --ic:url('/styles/images/icon-familia.svg?v=color-20260824'); }   /* Familia y amistades */

@media (max-width:640px){
  .hp-page-faq .hp-faq-areas{ grid-template-columns:repeat(2,1fr); gap:18px 10px; }
  .hp-page-faq .hp-faq-bloque{ gap:13px; margin:36px 0 16px; padding-top:22px; }
  .hp-page-faq .hp-faq-bico{ width:54px; height:54px; }
  .hp-page-faq .hp-faq-bico svg{ width:27px; height:27px; }
  .hp-page-faq .hp-faq-btit{ font-size:19.5px; }
}
@media (max-width: 767px) {
  /* EL MISMO FALLO QUE EN LA PAGINA LEGAL, y por eso se anota: aqui habia un
     tamano FIJO para movil que quedaba POR DEBAJO del minimo del clamp --24px
     contra los 33,6 que calcula, y 16px contra 16,5--. Una regla de movil
     escrita antes que el clamp no lo ayuda: lo pisa y lo empequenece.
     Se queda solo el ajuste de aire, que si hace falta. */
  .hp-page-faq .hp-faq-toggle { padding: 17px 34px 17px 0; }
  .hp-page-faq .hp-faq-body { padding-right: 0; }
  .hp-page-faq .hp-faq-body { padding: 0 16px; }
  .hp-page-faq .hp-faq-panel:not(.hp-cerrada) > .hp-faq-body { padding-bottom: 16px; }
}

/* ===== §18.7 Legal (hp-page-legal): Privacidad y Aviso Legal ==============
   Mismo lenguaje para ambas; contenido juridico intacto (se estilan sus
   clases originales: eyebrow, meta, badges, k, no). Cabecera publica minima
   = espejo del componente aprobado en FAQ (duplicado a proposito: faqs.tpl y
   su bloque estan congelados). */
.hp-page-legal .hp-faq-pubheader { background: #FFFFFF; border-bottom: 1px solid #D6E2EE; }
.hp-page-legal .hp-faq-pubheader .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.hp-page-legal .hp-faq-pubbrand {
  display: block;
  width: 132px;
  height: 44px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.hp-page-legal .hp-faq-publogin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hp-border, #D6E2EE);
  border-radius: 10px;
  color: var(--hp-blue, #004FA0);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.hp-page-legal .hp-faq-publogin:hover { border-color: var(--hp-blue, #004FA0); }
.hp-page-legal .hp-faq-publogin:focus-visible { outline: 2px solid var(--hp-focus, var(--hp-blue)); outline-offset: 2px; }
/* hero documental */
.hp-page-legal .hp-legal-hero .badges { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
/* Sobre la banda oscura, las insignias invierten: borde y texto claros. */
.hp-page-legal .hp-legal-hero .badges span {
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
  color: #E8F1FA;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 4px 12px;
}
/* dos columnas: indice + texto */
.hp-page-legal .hp-legal-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 760px); gap: clamp(36px, 6vw, 90px); align-items: start; }
.hp-page-legal .hp-legal-index {
  position: sticky;
  top: 96px;
  background: #FFFFFF;
  border: 1px solid #D6E2EE;
  border-radius: 12px;
  padding: 14px 16px;
}
.hp-page-legal .hp-legal-index .k {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5B6F83;
  margin-bottom: 8px;
}
.hp-page-legal .hp-legal-index a {
  display: block;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--hp-text, #16283C);
  text-decoration: none;
}
.hp-page-legal .hp-legal-index a:hover { color: var(--hp-blue, #004FA0); }
.hp-page-legal .hp-legal-index a:focus-visible { outline: 2px solid var(--hp-focus, var(--hp-blue)); outline-offset: 2px; border-radius: 4px; }
/* texto juridico legible; anclas visibles bajo la barra sticky */
.hp-page-legal .hp-legal-content { min-width: 0; }
.hp-page-legal .hp-legal-content section {
  scroll-margin-top: 104px;
  margin: 0;
  padding: 30px 0;
  border-top: 1px solid #E4EBF3;
}
.hp-page-legal .hp-legal-content section:first-child { border-top: 0; padding-top: 6px; }
.hp-page-legal .hp-legal-content h2 {
  font-family: Inter, "Roboto", Arial, sans-serif;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.2;
  letter-spacing: -.015em;
  font-weight: 800;
  color: #07131F;
  margin: 0 0 14px;
  text-transform: none;
}
.hp-page-legal .hp-legal-content h2 .no { color: #7A8CA1; margin-right: 8px; }
/* CUERPO EN SERIF, que es lo que mas cambia la lectura de un texto largo.
   Georgia esta en todos los sistemas: no anade una peticion de fuente ni un
   salto de maquetacion mientras carga. Se limita a los parrafos y listas del
   documento; los titulos siguen en la tipografia de la casa. */
.hp-page-legal .hp-legal-content p,
.hp-page-legal .hp-legal-content li {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.72;
  color: #34475C;
}
.hp-page-legal .hp-legal-content p { margin: 0 0 16px; max-width: 68ch; }
.hp-page-legal .hp-legal-content ul, .hp-page-legal .hp-legal-content ol { margin: 0 0 13px; padding-left: 22px; }
.hp-page-legal .hp-legal-content a { color: var(--hp-blue, #004FA0); }
.hp-page-legal .hp-legal-content strong { color: #16283C; }
@media (max-width: 991px) {
  .hp-page-legal .hp-legal-layout { grid-template-columns: 1fr; gap: 20px; }
  .hp-page-legal .hp-legal-index { position: static; }
  .hp-page-legal .hp-legal-index a { display: inline-block; padding: 4px 10px 4px 0; }
  .hp-page-legal .hp-legal-content section { scroll-margin-top: 90px; }
}
@media (max-width: 767px) {
  .hp-page-legal .hp-faq-pubbrand { width: 44px; background-image: url("/images/ico/icono-felicidad.png") !important; }
  /* El titular ya escala con clamp(); la regla fija de aqui lo dejaba MAS
     pequeno que el propio clamp en el mismo ancho. Se quita el tamano y se
     conserva solo el ajuste de aire. */
  .hp-page-legal .hp-legal-hero { padding: 30px 22px; border-radius: 16px; }
  .hp-page-legal .hp-legal-hero::after { font-size: 52vw; top: -18%; }
}

/* ===== §18.8 Mi cuenta (hp-page-account) ================================= */
.hp-page-account .hp-account { max-width: 1100px; }
.hp-page-account .hp-account-h1 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 30px; line-height: 38px; font-weight: 700;
  color: #0B4F91; margin: 22px 0 6px; text-transform: none;
}
.hp-page-account .hp-account-sub { font-size: 16px; line-height: 24px; color: #5B6F83; margin: 0 0 24px; }
.hp-page-account .hp-account-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.hp-page-account .hp-account-card {
  background: #FFFFFF; border: 1px solid #D6E2EE; border-radius: 14px;
  padding: 22px; margin-bottom: 18px;
}
.hp-page-account .hp-account-card h2 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 18px; line-height: 26px; font-weight: 700; color: #16283C;
  margin: 0 0 16px; text-transform: none;
}
.hp-page-account .hp-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.hp-page-account .hp-campo label {
  display: block; font-size: 13.5px; line-height: 19px; font-weight: 600;
  color: #33445A; margin: 0 0 6px;
}
.hp-page-account .hp-campo input[type="text"],
.hp-page-account .hp-campo input[type="password"],
.hp-page-account .hp-campo select {
  width: 100%; min-height: 44px; padding: 8px 12px;
  background: #FFFFFF; border: 1px solid #C9D9E8; border-radius: 10px;
  font-family: "Roboto", Arial, sans-serif; font-size: 15px; color: #16283C;
}
.hp-page-account .hp-campo input:focus-visible,
.hp-page-account .hp-campo select:focus-visible,
.hp-page-account button:focus-visible { outline: 2px solid var(--hp-focus, var(--hp-blue)); outline-offset: 2px; }
.hp-page-account .hp-campo input[disabled] { background: #F3F7FC; color: #5B6F83; }
.hp-page-account .hp-campo input[aria-invalid="true"] { border-color: #E2372F; }
.hp-page-account .hp-error { color: #B3261E; font-size: 13px; line-height: 18px; margin: 6px 0 0; }
.hp-page-account .hp-ayuda { color: #5B6F83; font-size: 13.5px; line-height: 19px; margin: 12px 0 8px; }
.hp-page-account .hp-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; color: #16283C; }
.hp-page-account .hp-check input { width: 18px; height: 18px; }
.hp-page-account .hp-btn-primario {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px; border: 0; border-radius: 10px;
  background: #0057A8; color: #FFFFFF; font-family: "Roboto", Arial, sans-serif;
  font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.hp-page-account .hp-btn-primario:hover { background: #004488; }
.hp-page-account .hp-btn-primario[disabled] { opacity: .6; cursor: default; }
.hp-page-account .hp-btn-txt {
  background: none; border: 0; padding: 6px 2px; color: var(--hp-blue, #004FA0);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.hp-page-account .hp-account-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 4px 0 22px; }
.hp-page-account .hp-msg { margin: 0; font-size: 14.5px; }
.hp-page-account .hp-msg.ok { color: #1C7C46; }
.hp-page-account .hp-msg.mal { color: #B3261E; }
/* zona de cuenta (baja), tratamiento secundario */
.hp-page-account .hp-account-baja { border-style: dashed; background: #FBFDFF; }
.hp-page-account .hp-account-baja p { font-size: 14px; color: #5B6F83; margin: 0 0 12px; }
.hp-page-account .hp-btn-baja {
  background: none; border: 1px solid #E4B4B0; color: #B3261E;
  border-radius: 10px; min-height: 44px; padding: 0 16px; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.hp-page-account .hp-btn-baja-si {
  background: #B3261E; border: 0; color: #fff; border-radius: 10px;
  min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 700; cursor: pointer;
}
/* I5: el bloque de confirmacion SUSTITUYE al boton inicial. Ojo: cualquier
   regla de display propia gana al [hidden] del navegador, de ahi el reset. */
.hp-page-account .hp-baja-confirmar { display: block; font-size: 14px; color: #33445A; }
.hp-page-account .hp-baja-confirmar[hidden] { display: none; }
.hp-page-account .hp-baja-pregunta { font-size: 15px; font-weight: 600; color: #33445A; margin: 0 0 12px; }
.hp-page-account .hp-baja-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* lateral: avatar */
.hp-page-account .hp-avatar-marco {
  width: 160px; height: 160px; border-radius: 50%; margin: 6px auto 14px;
  /* Fallback: la silueta neutra (#a1c0e2) que ya usa el Resumen. La URL
     era relativa y se resolvia contra /styles/, o sea /styles/styles/...:
     no cargaba y el circulo se veia vacio, como una imagen rota. */
  background: #F3F7FC url("/styles/images/icon-user-cyan.svg") center/72px no-repeat;
  border: 1px solid #D6E2EE; overflow: hidden; position: relative;
}
.hp-page-account .hp-avatar-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-page-account .hp-avatar-nota { text-align: center; font-size: 13px; color: #5B6F83; margin: 10px 0 0; }
.hp-page-account .hp-avatar-estado { text-align: center; font-size: 13.5px; color: #1C7C46; min-height: 19px; margin: 8px 0 0; }
.hp-page-account .hp-avatar-estado.mal { color: #B3261E; }
.hp-page-account .hp-avatar-diag { text-align: center; font-size: 11.5px; color: #7A8A9C; margin: 4px 0 0; font-family: monospace; }
.hp-page-account .hp-avatar-botones { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.hp-page-account .hp-btn-secundario {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--hp-blue, #004FA0);
  border-radius: 10px; background: #FFFFFF; color: var(--hp-blue, #004FA0);
  font-family: "Roboto", Arial, sans-serif; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.hp-page-account .hp-btn-secundario:hover { background: var(--hp-blue-soft, #F3F7FC); }
/* I5: la foto elegida se ve en el circulo grande (sin segunda miniatura);
   aqui solo quedan el nombre del archivo y las dos acciones. */
.hp-page-account .hp-avatar-preview { text-align: center; margin-top: 12px; }
.hp-page-account .hp-avatar-marco.es-preview { border: 2px dashed var(--hp-blue, #004FA0); }
.hp-page-account .hp-avatar-meta { font-size: 12.5px; color: #5B6F83; margin: 8px 0 10px; overflow-wrap: anywhere; }
.hp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 991px) {
  .hp-page-account .hp-account-layout { grid-template-columns: 1fr; }
  .hp-page-account .hp-account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hp-page-account .hp-account-h1 { font-size: 24px; line-height: 32px; }
  .hp-page-account .hp-account-card { padding: 16px; }
  .hp-page-account .hp-account-acciones { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  /* I5 movil: baja en filas claras, sin comprimir el texto de los botones */
  .hp-page-account .hp-baja-acciones { flex-direction: column; align-items: stretch; }
  .hp-page-account .hp-baja-acciones .hp-btn-baja-si { width: 100%; padding: 0 12px; }
  .hp-page-account .hp-btn-baja { width: 100%; }
}

/* ===== §18.9 I3: foto de perfil en la tarjeta del Resumen =================
   Circulo 72px sobre la tarjeta actual; el fondo (icono generico) queda como
   fallback si no hay foto, falta el archivo o la carga falla (onerror). */
.hp-page-summary ul.vista-rapida > li.img-perfil { position: relative; }
.hp-page-summary .hp-avatar-resumen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #FFFFFF;
}
.hp-page-summary ul.vista-rapida > li.img-perfil > a { position: relative; z-index: 1; }

/* ===== §19 Commit D: macrosecciones plegables del Resumen ================
   El encabezado congelado (hp-summary-section-title) NO se toca: el boton va
   DENTRO del h2, hereda su tipografia y hace pulsable toda la fila (44px).
   Plegado por grid-template-rows 0fr: el contenido conserva su ANCHO real aun
   cerrado (los canvas se dibujan con medidas correctas en la carga). */
.hp-page-summary .hp-summary-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.hp-page-summary .hp-summary-toggle:focus-visible {
  outline: 2px solid var(--hp-focus, var(--hp-blue));
  outline-offset: 3px;
  border-radius: 6px;
}
.hp-page-summary .hp-summary-lbl { flex: 0 1 auto; }
.hp-page-summary .hp-summary-count {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: #5B6F83;
  background: var(--hp-blue-soft, #F3F7FC);
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.hp-page-summary .hp-summary-count:empty { display: none; }
.hp-page-summary .hp-summary-count:empty + .hp-summary-chev { margin-left: auto; }
.hp-page-summary .hp-summary-chev { flex: 0 0 auto; color: var(--hp-blue); transition: transform .18s ease; }
.hp-page-summary .hp-summary-toggle[aria-expanded="true"] .hp-summary-chev { transform: rotate(180deg); }
.hp-page-summary .hp-summary-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .22s ease;
}
.hp-page-summary .hp-summary-panel > .hp-summary-panel-inner { min-height: 0; overflow: hidden; }
.hp-page-summary .hp-summary-panel.hp-cerrada { grid-template-rows: 0fr; }
.hp-page-summary .hp-summary-panel.hp-cerrada > .hp-summary-panel-inner {
  visibility: hidden;
  max-height: 0; /* refuerzo para navegadores sin filas 0fr */
}
@media (max-width: 767px) {
  .hp-page-summary .hp-summary-count { font-size: 12px; padding: 2px 8px; }
}

/* ===== §18 Footer interior ================================================ */
footer.hpf-mini { background: var(--hp-blue); min-height: 72px; margin-top: var(--hp-space-8); display: flex; align-items: center; }
footer.hpf-mini .in { width: 100%; padding: 22px 24px; font-size: 13px; line-height: 18px; }
footer.hpf-mini a { color: var(--hp-white); font-size: 13px; }
footer.hpf-mini a:hover { color: var(--hp-white); text-decoration: underline; }

/* ===== §19 Responsive ===================================================== */

/* Tablet: 768–991 */
@media (min-width: 768px) and (max-width: 991px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .hp-page-title,
  h2.titulo-seccion-desk .hp-page-title { font-size: 32px !important; line-height: 38px !important; }
  .titulo-seccion-desk:has(> .hp-page-title) { grid-template-columns: 1fr; }
  /* Rueda y datos apilados si no cabe la doble columna */
  .como-es .border { grid-template-columns: 1fr; }
  .como-es .col-md-5 { border-left: 0; border-top: 1px solid var(--hp-divider); }
  /* §19.2: chips de áreas con scroll horizontal si no caben (no comprimirlas) */
  /* Columnas de clasificación a 3 sigue cabiendo justo; mejor 1 columna ancha en tablet corto */
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* Móvil: ≤767 */
@media (max-width: 767px) {
  .container { width: 100%; padding-left: 16px; padding-right: 16px; }
  .hp-page-title,
  h2.titulo-seccion-desk .hp-page-title { font-size: 28px !important; line-height: 34px !important; letter-spacing: -0.015em; }
  .titulo-seccion-desk:has(> .hp-page-title) { grid-template-columns: 1fr; gap: 12px; }
  h2 { font-size: 21px; line-height: 27px; }

  /* Aire muerto superior: el legacy compensaba su nav FIXED con body{padding:55px 0 0}
     a <=991; el nav ahora es sticky (en flujo), asi que ese offset sobra. Un solo aire
     visual: el padding vertical de la propia fila. */
  body { padding-top: 0 !important; }

  /* §7.2 Navegación móvil DEFINITIVA (referencia de Pedro): UNA banda azul de
     marca con los 5 iconos en blanco — bien diferenciada de los chips blancos
     de áreas (ya no parecen "dos menús"). El 5º es la hamburguesa que abre el
     desplegable. Nombres accesibles conservados en el DOM. */
  nav.nav.profile_head_nav { background: var(--hp-blue); margin-bottom: 0; }
  /* separacion controlada banda->areas: 16px de margen + 8px del padding de la fila = 24px */
  /* El aire de encima y el de debajo de los chips tienen que ser IGUALES.
     Estaba 16 arriba y 4 abajo --cuatro veces menos--, asi que la barra se veia
     pegada al contenido y despegada de la cabecera. Pedro: «estos dos
     espaciados deberian tener la misma altura, y ahora salen mal».
     A ancho de escritorio ya eran simetricos (24 de margen, medido 32/30); la
     asimetria vivia solo en este bloque de movil. */
  nav.ambitos.hp-areas-bar { margin: 16px 0 !important; padding: 0 !important; box-shadow: none !important; }
  /* Con esos 4 px la barra de areas y el titulo del paso quedaban pegados, y
     la barra ademas es sticky: al desplazarse se apoyaba en el titulo sin
     nada de aire. El respiro se pone en el contenedor de introduccion, con
     padding -- ni `top`, ni `transform`, ni un salto metido en el texto --
     para que se sume a los 4 px del margen de la barra y den los 28 pedidos.
     Solo en movil: en escritorio ya hay 24 px y no se toca. */
  :is(.hp-page-step-2, .hp-page-step-3) nav.ambitos.hp-areas-bar + .container {
    padding-top: 24px;
  }
  /* El desplegable que abre la hamburguesa, como panel limpio bajo la banda */
  /* J: contraste. styles.css:1499 pinta cada li de azul (#2c509b) y esta hoja
     ponia el texto en gris (--hp-text): 1.02:1, ilegible. Texto en blanco
     (7.9:1, AAA) y estados visibles; el nav toma el mismo azul para que el
     padding del ul no deje bandas blancas. Solo color: sin tocar estructura,
     enlaces, JS ni dimensiones. */
  nav.menu-mob { background: #2C509B; border-bottom: 1px solid var(--hp-divider); }
  nav.menu-mob ul { list-style: none; margin: 0; padding: 6px 0; }
  nav.menu-mob ul li a {
    display: block;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 20px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }
  nav.menu-mob ul li a:hover,
  nav.menu-mob ul li a:focus {
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
    text-decoration: underline;
  }
  nav.menu-mob ul li a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -3px; }
  nav.menu-mob ul li:last-child a { border-bottom: 0; }

  /* Panel de la rueda: rueda arriba, datos debajo, padding 18 */
  .como-es .border { grid-template-columns: 1fr; }
  .como-es .col-md-7 { padding: 18px; }
  .como-es .col-md-5 { padding: 18px; border-left: 0; border-top: 1px solid var(--hp-divider); }

  /* Botones principales al 100%; social en línea aparte */
  .como-es .border .rueda-actions { flex-wrap: wrap; padding: 16px 18px; }
  /* Guardar y Empezar de nuevo COMPARTEN linea (Pedro, 2026-08-05):
     apilados al 100% ocupaban demasiada altura. A mitades con el hueco
     del contenedor; en pantallas estrechisimas envuelven solos. */
  .como-es .border .rueda-actions .save,
  .como-es .border .rueda-actions .remove {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
    font-size: 16px !important;
  }
  .como-es .border .rueda-actions .rueda-actions__social {
    margin-left: 0; width: 100%; justify-content: flex-start; flex-wrap: wrap;
    padding-top: 10px; border-top: 1px solid var(--hp-divider);
  }
  .como-es .rueda-actions .hp-compartir-txt { text-align: left; margin-right: auto; }
  /* subrueda: columnas apiladas y fila de guardado a ancho de tarjeta */
  #hp-subruedas .hp-sub-cols { grid-template-columns: 1fr; gap: 20px; }
  #hp-subruedas .hp-sub-panel { padding: 18px 18px 0; }
  #hp-subruedas .hp-sub-save { margin: 20px -18px 0; }

  .hp-lectura-card { padding: 18px; border-radius: 12px; }

  #hp-subruedas .hp-sub-tab { min-width: 128px; }

  /* 16.5 movil: una columna (las tres apiladas a todo el ancho) */
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) { grid-template-columns: 1fr; gap: 12px; }
  .add-deseos .nuevo .form-group { grid-template-columns: 1fr; }
  /* Boton Anadir a todo el ancho CON su "+" nitido junto al texto */
  .add-deseos .nuevo input.btn-add {
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='white'%20d='M11%205h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: calc(50% - 42px) center;
    padding-left: 24px;
  }
  /* Constructor: cada fragmento de la frase como tarjeta limpia a todo el ancho */
  .add-deseos .archivo .construir {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .add-deseos .archivo .construir .form-group { width: 100%; display: flex; }
  .add-deseos .archivo .construir select { width: 100% !important; }
  /* Tramo FIJO de la composicion (nivel de opcion unica). Media 24px de alto
     junto a selects de 40 y parecia un campo roto y cortado (medido el
     2026-08-05 a 360 y 390). Misma altura y alineacion que un select, pero
     sin fingir que se puede editar: fondo suave, sin flecha, y se anuncia a
     los lectores como texto, no como control. */
  .add-deseos .archivo .construir .form-group > span {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    background: var(--hp-surface-soft);
    border: 1px solid var(--hp-divider);
    border-radius: 10px;
    font-size: 15px;
    line-height: 22px;
    box-sizing: border-box;
  }
  /* 8.2 movil: las 8 areas CABEN en una fila (reparto uniforme, sin scroll ni
     cortes): chips compactos solo-icono con badge; el nombre queda accesible. */
  /* Pantalla 2 (.hp-page-step-2): en movil manda el MISMO patron que en
     escritorio (linea superior + acento + circulo numerado), igual que P3 y
     el Resumen; solo se retiran las bandas azules legacy y el subtitulo. */
  /* la ayuda no se oculta: pasa a su propia linea, con su tamano de siempre
     (14/20) y sin el guion de union, que solo tiene sentido en la misma linea */
  .hp-page-step-2 h2.hp-seccion-h .hp-seccion-sub { display: block; margin-left: 0; }
  .hp-page-step-2 h2.hp-seccion-h .hp-seccion-dash { display: none; }
  /* Separacion intro -> seccion 1 en ~40px: la intro aporta 8 y el encabezado
     congelado sus 32 (medido: eran 32+32=64 sin colapso entre contenedores) */
  .hp-page-step-2 .titulo-seccion-desk:has(> .hp-page-title) { margin-bottom: 8px; }
  /* Leyenda de cumplimiento en columna (solo presentacion; textos y eventos intactos) */
  .hp-leyenda-estado {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .hp-leyenda-estado .ley-head { font-weight: 600; color: var(--hp-heading); }
  .hp-leyenda-estado .ley-item { display: inline-flex; align-items: center; gap: 9px; }
  .hp-leyenda-estado .sep { display: none; }
  /* orden movil seccion 3: ultima condicion + 32px + encabezado + 16px + tarjeta
     (el mb de 48px de la ordenacion pisaba los 32 del encabezado) */
  .hp-page-step-2 :is(.add-deseos-ordenacion, .add-premios-ordenacion) { margin-bottom: 0; }

  /* Resumen movil — Commit B: 4 tarjetas en UNA fila (aprobado), legibles a 360.
     El padding lateral lo aporta .container (16px): la ul no lo duplica. */
  .hp-page-summary ul.vista-rapida {
    grid-template-columns: 88px repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 0;
    margin: 0 0 4px;
  }
  .hp-page-summary ul.vista-rapida > li {
    min-width: 0;
    min-height: 104px;
    padding: 10px 6px;
    border-radius: 12px !important;
  }
  .hp-page-summary ul.vista-rapida > li:not(.img-perfil) > a { font-size: 32px !important; line-height: 36px !important; }
  .hp-page-summary ul.vista-rapida > li:not(.img-perfil) > a span { font-size: 14px; line-height: 18px; text-align: center; }
  .hp-page-summary ul.vista-rapida > li.img-perfil { background-size: 72px auto !important; }

  /* separadores de macroseccion en movil: aire proporcional */
  :is(.hp-page-summary h2.encabezado.hp-summary-section-title, h2.hp-section-title),
#hp-subruedas > .hp-lectura-h {
    margin: 24px 0 16px !important;
    padding: 14px 0 0 !important;
    font-size: 22px !important;
    line-height: 29px !important;
  }
  :is(.hp-page-summary h2.encabezado.hp-summary-section-title, h2.hp-section-title)::before,
#hp-subruedas > .hp-lectura-h::before { width: 72px; }


  /* Resumen movil — microcommit: separacion visual de las tarjetas de area
     (#hpq-mount, pintadas por condiciones.js) y transicion a Cambios pendientes.
     Solo <=767; borde superior del color de area INTACTO (border-top no se toca). */
  .hp-page-summary #hpq-mount .hpq-cards { gap: 20px; }
  .hp-page-summary #hpq-mount .hpq-acard {
    margin: 0; /* bootstrap .alert (clase de la tarjeta con pendientes) sumaba 20px al gap */
    background: #FFFFFF;
    border-left: 1px solid #C9D9E8;
    border-right: 1px solid #C9D9E8;
    border-bottom: 1px solid #C9D9E8;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 79, 160, 0.07);
  }
  /* Pantalla 3 (hp-page-step-3): en movil manda el MISMO patron que en
     escritorio (filete azul + circulo numerado); solo se retira la banda
     legacy 'Que quiero' / 'Tus cambios' y el subtitulo largo del paso 1. */
  /* la ayuda no se oculta: pasa a su propia linea, con su tamano de siempre
     (14/20) y sin el guion de union, que solo tiene sentido en la misma linea */
  .hp-page-step-3 h2.hp-seccion-h .hp-seccion-sub { display: block; margin-left: 0; }
  .hp-page-step-3 h2.hp-seccion-h .hp-seccion-dash { display: none; }
  /* aire bajo el titulo de pagina: el filete azul del paso 1 nunca debe
     leerse como una segunda linea pegada al filete rojo */
  .hp-page-step-3 .titulo-seccion-desk:has(> .hp-page-title) { margin-bottom: 16px; }
  /* lapiz y bombilla: superficie tactil 44x44 sin tapar el texto */
  .add-premios-ordenacion .listado ul li { padding-right: 104px !important; }
  .add-premios-ordenacion .listado ul li .actions .cambio-nuevo,
  .add-premios-ordenacion .listado ul li .actions .cambio-sugerir {
    width: 44px;
    height: 44px;
    background-size: 22px;
  }
  /* cambio ya marcado: tarjeta apilada (estado+texto / fecha+premio / acciones dcha) */
  ul.cambios li {
    grid-template-columns: 36px 1fr 44px 44px;
    grid-template-rows: auto auto auto;
    row-gap: 6px;
    padding: 12px;
  }
  ul.cambios li { align-items: start; }
  /* el legacy movil posiciona .oks/.borrar en absoluto (top 15): neutralizar con especificidad */
  ul.cambios li .oks,
  ul.cambios li .cambio,
  ul.cambios li .twitter,
  ul.cambios li .fecha,
  ul.cambios li .premio,
  ul.cambios li .borrar { position: static !important; top: auto; width: auto; height: auto; }
  ul.cambios li > .oks { grid-row: 1; grid-column: 1; margin: 0; padding: 0; }
  ul.cambios li > .oks div { margin: 0; }
  ul.cambios li > .cambio { grid-row: 1; grid-column: 2 / 5; align-self: center; }
  ul.cambios li > .fecha { grid-row: 2; grid-column: 2; }
  ul.cambios li > .premio { grid-row: 2; grid-column: 3 / 5; justify-self: end; text-align: right; }
  ul.cambios li > .twitter { grid-row: 3; grid-column: 3; justify-self: end; }
  ul.cambios li > .borrar { grid-row: 3; grid-column: 4; justify-self: end; }
  ul.cambios li a.twittear,
  ul.cambios li .borrar .btn-remove {
    width: 44px; height: 44px; position: relative;
    background-color: transparent; background-image: none !important; box-shadow: none;
  }
  ul.cambios li .borrar .btn-remove::before {
    content: ""; box-sizing: border-box;
    position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border-radius: 50%; background-color: #F1F5F9; border: 1px solid #D6E2EE;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%2364748B'%20d='M6%207h12l-1%2014H7L6%207zm3-3h6l1%202H8z'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat;
    box-shadow: none;
  }
  ul.cambios li .borrar .btn-remove:hover::before,
  ul.cambios li .borrar .btn-remove:focus-visible::before,
  ul.cambios li .borrar .btn-remove:active::before {
    background-color: var(--hp-danger-soft, #FDEAEA); border-color: #F0C4C0; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23E2372F'%20d='M6%207h12l-1%2014H7L6%207zm3-3h6l1%202H8z'/%3E%3C/svg%3E");
  }

  /* Rejilla de 8 columnas con objetivo tactil de 44px.
     El comentario decia «rejilla EXACTA ... a 360px: 8x44+8 = 360», y esa
     palabra era el problema: 360 px EXACTOS es el suelo, no el minimo. Por
     debajo --un iPhone SE son 320-- no cabe, y como html y body llevan
     `overflow-x: clip`, los chips que sobran NO se pueden desplazar: se
     RECORTAN EN SILENCIO. A 320 px del octavo chip quedaban 8 px tocables.
     Con `minmax(0, 1fr)` las columnas pueden encogerse por debajo de 44 y los
     ocho siguen ahi; el minimo tactil se conserva por altura, que es lo que se
     puede conservar cuando el ancho fisico no da. Un objetivo estrecho pero
     visible es peor que uno cuadrado, y muchisimo mejor que uno invisible. */
  nav.ambitos.hp-areas-bar .container { padding-left: 4px !important; padding-right: 4px !important; }
  nav.ambitos.hp-areas-bar ul {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    padding: 8px 0 4px;
    margin: 0;
  }
  nav.ambitos.hp-areas-bar ul li {
    width: auto !important;
    /* El SEGUNDO suelo de 44 px, y con !important: mientras estuviera aqui, la
       rejilla podia decir minmax(0,1fr) y daba igual, el chip no bajaba de 44
       y los ocho seguian sin caber por debajo de 360.
       La zona tactil se conserva por ALTURA --los 48 px de aqui abajo-- que es
       lo que se puede conservar cuando el ancho fisico de la pantalla no da
       para ocho de 44. */
    min-width: 0 !important;
    height: 48px !important;
    min-height: 0 !important;
  }
  nav.ambitos.hp-areas-bar ul li a {
    min-width: 0 !important;
    min-height: 0;
    height: 100%;
    padding: 0 !important;
    justify-content: center;
    font-size: 0 !important;
    background-position: center !important;
    background-size: 24px !important;
  }
  nav.ambitos.hp-areas-bar ul li a .nm,
  nav.ambitos.hp-areas-bar ul li a span.nm { display: none !important; }
  nav.ambitos.hp-areas-bar ul li a span.cuantas {
    display: inline-flex !important;
    position: absolute !important;
    top: -4px;
    right: 1px;
    left: auto !important;   /* el legacy fijaba left:0 y estiraba el badge */
    margin: 0 !important;
    min-width: 17px !important;
    width: 17px !important;
    height: 17px !important;
    line-height: 17px !important;
    padding: 0 !important;
    font-size: 10px !important;
    border: 1.5px solid var(--hp-white) !important;
  }
}

/* ≤600: subruedas.js oculta las etiquetas de las tabs (solo icono); que compriman bien */
@media (max-width: 600px) {
  #hp-subruedas .hp-sub-tab,
  #hp-subruedas .hp-sub-tab:nth-child(1),
  #hp-subruedas .hp-sub-tab:nth-child(2),
  #hp-subruedas .hp-sub-tab:nth-child(4) {
    min-width: 0;
    flex: 1 1 0;
    justify-content: center;
    padding: 8px 6px;
  }
}

/* Móviles estrechos */
@media (max-width: 380px) {
  .como-es .areas > ul > li {
    grid-template-columns: minmax(0, 1fr) 36px;
  }
  .como-es .areas > ul > li .hp-bars { grid-column: 1 / -1; justify-self: start; padding-bottom: 4px; }
}

/* ===== §20 Editor inline de cambios (Que quiero cambiar) ================
   Vive como fila propia del tablero, no dentro de una columna: dentro solo
   tenia un tercio del ancho, los labels se partian, la fecha se recortaba y
   la columna central crecia sin fin. Tampoco debe ser zona de arrastre. */
.hp-cambio-editor {
  grid-column: 1 / -1;
  float: none;
  clear: both;
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #D6E2EE;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  padding: 18px;
  /* los .col-md-* de bootstrap traen 15px de gutter: el editor se alinea con
     ellos en vez de sobresalir del tablero */
  margin: 0 15px 18px;
  max-width: calc(100% - 30px);
  font-family: "Roboto", Arial, sans-serif;
  list-style: none;
}
.hp-cambio-editor[hidden] { display: none; }
.hp-cambio-editor * { box-sizing: border-box; }

/* cabecera: azul palido, sin banda turquesa */
.hp-cambio-cabecera { border-left: 3px solid #0057A8; background: #F3F7FC; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; }
.hp-cambio-titulo { margin: 0 0 3px; font-size: 18px; line-height: 24px; font-weight: 700; color: #0057A8; background: none; }
.hp-cambio-intro { margin: 0; font-size: 14px; line-height: 20px; color: #5B6F83; }
.hp-cambio-ref {
  margin: 8px 0 0; font-size: 13px; line-height: 18px; color: #33445A; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-cambio-ref span { font-style: italic; }

/* la condicion de origen queda marcada mientras el editor esta abierto */
.add-premios-ordenacion .listado ul li.hp-cond-activa {
  border-color: #0057A8 !important;
  box-shadow: 0 0 0 2px rgba(0, 87, 168, .18) !important;
}

/* dos zonas en escritorio: formulario y sugerencias */
.hp-cambio-zonas { display: block; }
.hp-cambio-campos { display: grid; grid-template-columns: 1fr; gap: 12px 16px; }
.hp-cambio-campo label { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: #33445A; margin: 0 0 4px; }
.hp-cambio-campo input {
  width: 100%; min-height: 44px; padding: 0 12px; font-size: 15px;
  border: 1px solid #C9D9E8; border-radius: 10px; background: #fff; color: #16283C;
  font-family: "Roboto", Arial, sans-serif;
}
.hp-cambio-campo input:focus { outline: 2px solid #0057A8; outline-offset: 1px; border-color: #0057A8; }
.hp-cambio-campo input[aria-invalid="true"] { border-color: #B3261E; }
.hp-cambio-error { margin: 5px 0 0; font-size: 13px; line-height: 18px; color: #B3261E; }

/* sugerencias: filas compactas, texto a la izquierda, sin tarjetas centradas */
.hp-cambio-acordeon { margin: 16px 0 0; border-top: 1px solid #E6EDF4; padding-top: 10px; }
.hp-cambio-acordeon h4 { font-size: 13px; font-weight: 700; color: #33445A; margin: 12px 0 6px; text-align: left; }
.hp-cambio-acordeon .cambiosSugeridos {
  max-height: 300px; overflow-y: auto; border: 1px solid #E6EDF4; border-radius: 10px;
  padding: 4px; background: #F8FAFC; text-align: left; width: auto; float: none;
}
.hp-cambio-acordeon .cambiosSugeridos ul { margin: 0; padding: 0; list-style: none; }
.hp-cambio-acordeon .cambiosSugeridos li {
  display: flex; align-items: flex-start; gap: 8px; width: auto; float: none;
  text-align: left; background: #fff; border: 1px solid #E6EDF4; border-radius: 8px;
  margin: 0 0 6px; padding: 8px 10px; font-size: 13.5px; line-height: 18px; color: #16283C;
  min-height: 0; height: auto;
}
.hp-cambio-acordeon .cambiosSugeridos li:hover { border-color: #0057A8; background: #F3F7FC; }
.hp-cambio-acordeon .cambiosSugeridos li label { display: block; text-align: left; margin: 0; font-weight: 400; cursor: pointer; }
.hp-cambio-acordeon .cambiosSugeridos li input[type="radio"] { margin: 2px 0 0; flex: 0 0 auto; }
.hp-cambio-acordeon .cambiosSugeridos li:focus-within { outline: 2px solid #0057A8; outline-offset: 1px; }

.hp-cambio-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 0; }
.hp-cambio-estado { flex: 1 1 100%; margin: 0; font-size: 13.5px; color: #1C7C46; min-height: 18px; }
.hp-cambio-estado.mal { color: #B3261E; }
.hp-cambio-btn {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px;
  background: #0057A8; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: "Roboto", Arial, sans-serif;
}
.hp-cambio-btn:hover { background: #00417F; }
.hp-cambio-btn[disabled] { opacity: .6; cursor: default; }
.hp-cambio-btn-sec { min-height: 44px; padding: 0 16px; border: 1px solid #0057A8; border-radius: 10px; background: #fff; color: #0057A8; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.hp-cambio-btn-txt { min-height: 44px; padding: 0 8px; border: 0; background: none; color: #0057A8; font-size: 14.5px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.hp-cambio-aviso { background: #FFF8E6; border: 1px solid #E8D5A3; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
.hp-cambio-aviso p { margin: 0 0 8px; font-size: 14px; color: #6B4E00; }

/* accion unica de cada condicion: escribir o sugerir un cambio */
.add-premios-ordenacion .listado ul li .actions .hp-cambio-accion {
  width: 40px; height: 40px; min-width: 40px; padding: 0; border: 0; margin: 0;
  border-radius: 9px; background-color: transparent; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230057A8'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12.5%206.5%2017%2011%208%2020H3.5v-4.5z'/%3E%3Cpath%20d='m14.6%204.4%202.1-2.1a1.6%201.6%200%200%201%202.3%200l1.7%201.7a1.6%201.6%200%200%201%200%202.3l-2.1%202.1'/%3E%3Cpath%20d='M18.5%2013.5%2019.3%2015.7%2021.5%2016.5%2019.3%2017.3%2018.5%2019.5%2017.7%2017.3%2015.5%2016.5%2017.7%2015.7z'%20fill='%230057A8'%20stroke='none'/%3E%3C/svg%3E");
  background-size: 21px; background-position: center; background-repeat: no-repeat;
  appearance: none; -webkit-appearance: none; display: inline-block;
  transition: background-color .15s;
}
.add-premios-ordenacion .listado ul li .actions .hp-cambio-accion:hover { background-color: var(--hp-blue-soft, #F3F7FC); }
.add-premios-ordenacion .listado ul li .actions .hp-cambio-accion:focus-visible { outline: 2px solid #0057A8; outline-offset: 2px; }

/* condicion de origen: filete azul y fondo palido, sin halo ni mas altura */
.add-premios-ordenacion .listado ul li.hp-cond-activa {
  background: #F3F7FC !important;
  border-color: #D6E2EE !important;
  border-left: 3px solid #0057A8 !important;
  box-shadow: none !important;
}

/* dos vias dentro del editor: control segmentado discreto */
.hp-cambio-vias { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; background: #EEF3F9; border-radius: 10px; }
.hp-cambio-via {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
  color: #33445A; font-family: "Roboto", Arial, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer;
}
.hp-cambio-via.activa { background: #FFFFFF; color: #0057A8; box-shadow: 0 1px 3px rgba(15, 23, 42, .10); }
.hp-cambio-via:focus-visible { outline: 2px solid #0057A8; outline-offset: 2px; }
.hp-cambio-sug-titulo { margin: 0 0 10px; font-size: 15px; line-height: 20px; font-weight: 700; color: #0057A8; }
.hp-cambio-acordeon[hidden] { display: none; }

/* tablet: todo apilado, fecha y celebracion en dos columnas si caben */
@media (min-width: 700px) {
  .hp-cambio-campos { grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr); }
  .hp-cambio-campos .hp-campo-ancho { grid-column: 1 / -1; }
}
/* escritorio: formulario a la izquierda, sugerencias a la derecha */
@media (min-width: 1100px) {
  .hp-cambio-zonas { display: grid; grid-template-columns: minmax(0, 62fr) minmax(280px, 38fr); gap: 20px 24px; align-items: start; }
  .hp-cambio-acordeon { margin: 0; border-top: 0; border-left: 1px solid #E6EDF4; padding: 0 0 0 20px; }
  .hp-cambio-acordeon .cambiosSugeridos { max-height: 360px; }
}
@media (max-width: 699px) {
  .hp-cambio-editor { padding: 14px; }
  .hp-cambio-acciones .hp-cambio-btn { width: 100%; }
  .hp-cambio-acciones .hp-cambio-btn-txt { width: 100%; text-align: center; }
  .hp-cambio-acordeon .cambiosSugeridos { max-height: 240px; }
}

/* ===== §21 ALPHA 3.1 - Que quiero en mi vida ==========================
   Menos cajas dentro de cajas, listas mas ligeras, borrado contextual y
   analisis jerarquizado. Solo presentacion: marcado funcional, operaciones y
   sortable intactos. */

/* --- 21.1 entrada: una herramienta con dos vias --- */
.hp-a3-vias { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; background: #EEF3F9; border-radius: 10px; }
.hp-a3-via {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent;
  color: #33445A; font-family: "Roboto", Arial, sans-serif; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.hp-a3-via.activa { background: #FFFFFF; color: #0057A8; box-shadow: 0 1px 3px rgba(15, 23, 42, .10); }
.hp-a3-via:focus-visible { outline: 2px solid #0057A8; outline-offset: 2px; }
.hp-a3-entrada { border: 1px solid #D6E2EE; border-radius: 14px; padding: 16px; background: #fff; box-shadow: none; }
/* la via inactiva no existe: ni se ve ni reserva sitio */
.hp-a3-entrada[data-via="escribir"] .archivo { display: none !important; }
.hp-a3-entrada[data-via="catalogo"] .nuevo { display: none !important; }
.hp-a3-entrada .nuevo, .hp-a3-entrada .archivo {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important;
  position: static !important; width: auto !important; float: none !important;
}
.hp-a3-entrada .form-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 !important; }
.hp-a3-entrada .form-group > .form-control,
.hp-a3-entrada .form-group > .f-input { flex: 1 1 260px; min-height: 44px; width: auto !important; }
/* catalogo compacto: etiqueta arriba, selector ancho y limpiar al lado */
.hp-a3-entrada .archivo .f-input {
  order: 1; display: flex; align-items: center; padding: 0 12px;
  border: 1px solid #C9D9E8; border-radius: 10px; background: #fff; color: #16283C;
  font-size: 15px; line-height: 20px;
}
.hp-a3-entrada .archivo .btn-add { order: 2; }
.hp-a3-entrada .archivo .btn-remove { order: 3; position: static !important; float: none !important; top: auto !important; right: auto !important; }
.hp-a3-entrada .archivo .construir { margin-top: 10px !important; }
.hp-a3-entrada .archivo .construir:empty { display: none; }

/* --- 21.2 filas de condicion: rejilla estable [asa][estado][texto][borrar] --- */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li {
  display: grid !important;
  /* Escritorio: los controles no necesitan 44px de ancho con raton. El texto
     pasaba de 144px utiles en una columna de 303; asi gana ~25%. En tactil se
     recuperan los 44px mas abajo. */
  grid-template-columns: 30px 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 0 6px;
  background: #FFFFFF !important;
  border: 0 !important;
  border-bottom: 1px solid #E6EDF4 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 7px 10px !important;
  margin: 0 !important;
  min-height: 48px; height: auto !important;
  font-size: 15px; line-height: 20px; color: #16283C;
  white-space: normal; overflow: visible; text-overflow: clip;
  position: relative;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li:last-child { border-bottom: 0 !important; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li:hover { background: #F8FAFC !important; }
/* asa: celda propia, centrada, sin posicion absoluta ni margenes negativos */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li span.move {
  /* el legacy lo saca del flujo con position:absolute; top:5px: hay que
     anular tambien las coordenadas, no solo el position */
  position: static !important; float: none !important; margin: 0 !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  /* Alpha 2 centraba estos controles con top:50% + translateY(-50%): al pasar
     a rejilla, ese transform los subia 22px sobre el centro real de la fila. */
  transform: none !important;
  display: block !important; align-self: center !important;
  width: 30px !important; height: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='%238CA0B8'%3E%3Crect%20x='5'%20y='7'%20width='14'%20height='2'%20rx='1'/%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='2'%20rx='1'/%3E%3Crect%20x='5'%20y='15'%20width='14'%20height='2'%20rx='1'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 22px !important; background-position: center !important; background-repeat: no-repeat !important;
  cursor: grab; align-self: center;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li span.move:active { cursor: grabbing; }
/* estado: centrado en su celda, sin invadir el texto */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks {
  position: static !important; top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important; align-self: center !important;
  transform: none !important;
  width: 34px; height: 34px; display: flex !important; align-items: center; justify-content: center; margin: 0 !important;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks .btn-ok,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks .btn-no-ok {
  width: 28px !important; height: 28px !important; background-size: 26px !important;
  background-position: center !important; background-repeat: no-repeat !important; cursor: pointer; margin: 0 !important;
}
/* el texto vive en su celda: empieza siempre en el mismo punto y los iconos
   quedan centrados respecto a la altura real de la fila */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li { text-align: left; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .hp-a3-txt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3; cursor: default;
  align-self: center; padding: 2px 4px 2px 2px; min-width: 0;
  overflow-wrap: anywhere; word-break: normal;
}

/* --- 21.3 borrado contextual: el MISMO boton de "Todas tus ruedas" --------- */
/* Reutiliza el componente visual de .hp-hist .mini-del (circulo #E2372F,
   papelera blanca, radio 50%, sombra 0 1px 3px, hover scale(1.1)). No se crea
   un tercer estilo de papelera y no se toca la logica de borrado: el
   confirm(), el endpoint y el payload siguen siendo los de siempre. */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions {
  position: static !important; top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important; align-self: center !important;
  transform: none !important;
  width: 30px; margin: 0 !important; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
}
/* Semantica de color: el verde y el rojo de la fila son el ESTADO de la
   condicion; el gris neutro es una accion secundaria disponible; el rojo solo
   aparece al interactuar y el rojo solido queda para la confirmacion. */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove {
  box-sizing: border-box;
  width: 28px !important; height: 28px !important; padding: 0; border-radius: 50%;
  border: 1px solid #D6E2EE;
  background-color: #F1F5F9; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%2364748B'%20d='M6%207h12l-1%2014H7L6%207zm3-3h6l1%202H8z'/%3E%3C/svg%3E") !important;
  background-size: 14px !important; background-position: center !important; background-repeat: no-repeat !important;
  box-shadow: none;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  opacity: 0; transition: opacity .12s, background-color .15s, border-color .15s;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li:hover .actions .remove,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li:focus-within .actions .remove,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:focus-visible { opacity: 1; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:hover,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:focus-visible,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:active {
  background-color: var(--hp-danger-soft, #FDEAEA); border-color: #F0C4C0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23E2372F'%20d='M6%207h12l-1%2014H7L6%207zm3-3h6l1%202H8z'/%3E%3C/svg%3E") !important;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:focus-visible { outline: 2px solid #0057A8; outline-offset: 2px; }
@media (hover: none), (pointer: coarse) {
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove { opacity: 1; }
}
@media (max-width: 991px) {
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove { opacity: 1; }
}

/* --- 21.4 columnas: altura natural, sin piscinas --- */
/* Medido en la beta AUTENTICADA: al pasar el tablero a flex, las columnas
   .col-md-4 quedaron con flex:0 1 auto y ancho por contenido (793/569/546
   dentro de 1140): no cabian tres y hacian wrap. Rejilla explicita. */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) { display: block; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado {
  padding: 0 8px; align-self: start;
  float: none !important; clear: none !important; flex: none !important;
  width: auto !important; max-width: none !important;
}
@media (min-width: 992px) {
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px; align-items: start;
  }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) > h2,
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) > .hp-leyenda-estado,
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) > .hp-cambio-editor { grid-column: 1 / -1; }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado { padding: 0; }
}
@media (max-width: 991px) {
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado { width: 100% !important; margin-bottom: 16px; padding: 0; }
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul {
  height: auto !important; min-height: 72px !important; max-height: none !important;
  border: 1px solid #E6EDF4; border-radius: 12px; background: #fff; padding: 2px 0 !important; margin: 0 !important;
  display: block !important;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul .vacio {
  display: flex; align-items: center; justify-content: center; height: 68px;
  color: #8CA0B8; font-size: 13px; font-style: normal; background: none; border: 0;
}
/* durante el arrastre el destino se abre y se ve la guia */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul.ui-sortable-hover,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul:has(.ui-sortable-placeholder) {
  border-color: #0057A8; background: #F6FAFF; min-height: 120px !important;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado .ui-sortable-placeholder {
  visibility: visible !important; height: 6px !important; min-height: 6px !important;
  margin: 3px 8px !important; border: 0 !important; border-radius: 999px;
  background: #0057A8 !important; box-shadow: none !important;
}

/* --- 21.5 analisis: pie propio, sin solapamientos --- */
.hp-quiero .hpq-acard { border-top-width: 3px !important; box-shadow: none !important; padding: 12px 14px 12px !important; }
.hp-quiero .hpq-acard.clic { padding-bottom: 12px !important; }
.hp-quiero .hpq-acard h3 { margin: 0 0 8px !important; }
.hp-quiero .hpq-acard .hpq-row { font-size: 13px; }
.hp-quiero .hpq-acard .hpq-row.hpq-sin { color: #8CA0B8; }
.hp-quiero .hpq-acard .big { font-size: 26px !important; line-height: 30px !important; font-weight: 700; color: #16283C; }
.hp-quiero .hpq-acard.alert { border-color: #0057A8 !important; background: #F6FAFF !important; }
/* Total en su linea; Abrir area sale del posicionamiento absoluto que lo pisaba */
.hp-quiero .hpq-acard .foot {
  display: flex !important; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 10px !important; padding-top: 8px !important;
}
.hp-quiero .hpq-acard.clic .abrir {
  position: static !important; left: auto !important; bottom: auto !important;
  display: block; margin: 8px 0 0; opacity: 1 !important; font-size: 12.5px;
}

@media (max-width: 767px) {
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li { font-size: 15px; grid-template-columns: 44px 44px minmax(0, 1fr) 44px; }
  .hp-a3-entrada .form-group > .form-control, .hp-a3-entrada .form-group > .f-input { flex: 1 1 100%; }
  .hp-a3-entrada .form-group .btn-add { width: 100%; }
  .hp-a3-entrada .archivo .btn-remove { width: 44px; }
}

/* Que quiero cambiar: la cuarta celda es la accion unica (escribir o sugerir),
   que no es destructiva y por tanto no se oculta en reposo. */
.add-premios-ordenacion .listado ul li .actions .hp-cambio-accion { opacity: 1 !important; width: 44px !important; height: 44px !important; }
.add-premios-ordenacion .listado ul li { padding-right: 6px !important; }

/* --- 21.6 texto de la condicion: tres lineas y expansion accesible --------- */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .hp-a3-txt[data-trunc="1"] {
  cursor: pointer; position: relative;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .hp-a3-txt[data-trunc="1"]::after {
  content: "más"; display: inline; margin-left: 4px; font-size: 12.5px; font-weight: 600; color: #0057A8;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .hp-a3-txt.abierto {
  -webkit-line-clamp: unset; display: block; overflow: visible;
}
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .hp-a3-txt.abierto::after { content: "menos"; }
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .hp-a3-txt:focus-visible {
  outline: 2px solid #0057A8; outline-offset: 2px; border-radius: 4px;
}
/* movil: hasta cuatro lineas antes de expandir */
@media (max-width: 767px) {
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .hp-a3-txt { -webkit-line-clamp: 4; }
}
/* tactil: se recuperan las areas de 44px sin tocar el escritorio */
@media (hover: none), (pointer: coarse), (max-width: 991px) {
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li {
    grid-template-columns: 44px 44px minmax(0, 1fr) 44px; padding: 8px 8px !important; min-height: 56px;
  }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li span.move { width: 44px !important; height: 44px !important; }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks { width: 44px; height: 44px; }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions { width: 44px; }
  /* el boton conserva los 44x44 tactiles; el circulo rojo visible sigue
     midiendo 28px, centrado dentro de esa zona */
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove {
    width: 44px !important; height: 44px !important; position: relative;
    background-color: transparent !important; background-image: none !important; box-shadow: none;
  }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove::before {
    content: ""; box-sizing: border-box;
    position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border-radius: 50%; background-color: #F1F5F9; border: 1px solid #D6E2EE;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%2364748B'%20d='M6%207h12l-1%2014H7L6%207zm3-3h6l1%202H8z'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat;
    box-shadow: none; transition: background-color .15s, border-color .15s;
  }
  /* en tactil no hay hover: el rojo llega con la pulsacion y con el foco */
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:hover::before,
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:focus-visible::before,
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove:active::before {
    background-color: var(--hp-danger-soft, #FDEAEA); border-color: #F0C4C0; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23E2372F'%20d='M6%207h12l-1%2014H7L6%207zm3-3h6l1%202H8z'/%3E%3C/svg%3E");
  }
  .add-premios-ordenacion .listado ul li .actions .hp-cambio-accion { width: 44px !important; height: 44px !important; }
}

/* --- 21.7 ayuda contextual: un solo globo ---------------------------------
   Contenido y no invasivo: se ancla a la FILA para no tapar la condicion que
   se esta consultando y la flecha apunta al control que lo abrio. */
.hp-tip {
  position: fixed; z-index: 3000; max-width: 360px;
  padding: 8px 11px; border-radius: 8px;
  background: #00355F; color: #FFFFFF;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13px; line-height: 18px; font-weight: 400; text-align: left;
  white-space: normal; overflow-wrap: anywhere;
  box-shadow: 0 4px 14px rgba(0, 53, 95, .28);
  pointer-events: none;
}
.hp-tip[hidden] { display: none; }
.hp-tip::after {
  content: ""; position: absolute; left: var(--flecha, 20px); margin-left: -6px;
  width: 0; height: 0; border: 6px solid transparent;
}
.hp-tip.abajo::after { top: -12px; border-bottom-color: #00355F; }
.hp-tip.arriba::after { bottom: -12px; border-top-color: #00355F; }
/* el asa y el estado reciben foco: tiene que verse */
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li span.move:focus-visible,
:is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .oks > div:focus-visible {
  outline: 2px solid #0057A8; outline-offset: 2px; border-radius: 6px;
}

/* ===== §22 ALPHA 3 - Que quiero cambiar =================================
   Paso 3 consulta las condiciones, no las clasifica: sin asa, sin zonas de
   soltar y sin estado editable. Y la lista de cambios pasa de tarjeta enorme
   a fila compacta. Solo presentacion. */

/* --- 22.1 fila de condicion sin asa: [estado][texto][accion] ------------- */
.add-premios-ordenacion .listado ul li {
  grid-template-columns: 36px minmax(0, 1fr) 40px !important;
  padding: 6px 8px 6px 6px !important;
  min-height: 44px;
}
.add-premios-ordenacion .listado ul li span.move { display: none !important; }
/* el circulo informa; no es un boton */
.add-premios-ordenacion .listado ul li .oks > div {
  cursor: default !important;
}
.add-premios-ordenacion .listado ul li,
.add-premios-ordenacion .listado ul li * { cursor: default; }
.add-premios-ordenacion .listado ul li .hp-a3-txt[data-trunc="1"],
.add-premios-ordenacion .listado ul li .actions .hp-cambio-accion { cursor: pointer; }
/* las columnas son listas de consulta, no contenedores donde soltar */
.add-premios-ordenacion .listado ul { background: #fff; }
.add-premios-ordenacion .listado .ui-sortable-placeholder { display: none !important; }
@media (hover: none), (pointer: coarse), (max-width: 991px) {
  .add-premios-ordenacion .listado ul li { grid-template-columns: 40px minmax(0, 1fr) 44px !important; }
}

/* --- 22.2 cambios ya marcados: una fila, no una tarjeta ------------------ */
ul.cambios { margin: 0; padding: 0; list-style: none; }
ul.cambios li:not(.vacio) {
  display: grid;
  /* SEIS columnas para seis piezas (oks, cambio, fecha, premio, X, papelera).
     Con cinco, la papelera saltaba de fila y aterrizaba SOBRE el texto del
     premio, tapandolo (captura de Pedro en movil, 2026-08-10). */
  grid-template-columns: 34px minmax(0, 1fr) 96px 120px 40px 40px;
  align-items: center;
  gap: 0 10px;
  min-height: 52px; height: auto !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #E6EDF4 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  float: none !important;
}
ul.cambios li:not(.vacio):last-child { border-bottom: 0 !important; }
ul.cambios li:not(.vacio):hover { background: #F8FAFC !important; }
ul.cambios li > div {
  position: static !important; float: none !important; width: auto !important;
  padding: 0 !important; margin: 0 !important; min-height: 0 !important;
  transform: none !important; top: auto !important; left: auto !important; right: auto !important;
}
ul.cambios li .oks { order: 1; display: flex; align-items: center; justify-content: center; }
ul.cambios li .cambio { order: 2; font-size: 15px; line-height: 20px; color: #16283C; overflow-wrap: anywhere; }
ul.cambios li .fecha { order: 3; font-size: 13px; line-height: 18px; color: var(--hp-text-muted); text-align: left; }
ul.cambios li .premio { order: 4; font-size: 13px; line-height: 18px; color: var(--hp-text-muted); overflow-wrap: anywhere; }
ul.cambios li .twitter { order: 5; display: flex; align-items: center; justify-content: flex-end; }
ul.cambios li .borrar {
  order: 6; display: flex; align-items: center; justify-content: flex-end;
  padding-left: 8px !important; margin-left: 4px !important; border-left: 1px solid #E6EDF4;
}
/* compartir: el logotipo real de X, desnudo como la papelera — sin caja gris
   ni circulo (Pedro: «el compartir en Twitter queda mal»). El trazo oscuro
   del logotipo ya lo distingue del aspa de cerrar. */
ul.cambios li a.twittear {
  box-sizing: border-box;
  width: 36px !important; height: 36px !important; border-radius: 8px;
  border: 1px solid transparent; background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%2316283C'%20d='M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z'/%3E%3C/svg%3E") !important;
  background-size: 13px !important; background-position: center !important; background-repeat: no-repeat !important;
  text-indent: -9999px; overflow: hidden; transition: background-color .15s, border-color .15s;
}
ul.cambios li a.twittear:hover,
ul.cambios li a.twittear:focus-visible { background-color: var(--hp-surface-blue, #F3F7FC) !important; border-color: var(--hp-blue); }
ul.cambios li a.twittear:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 2px; }
@media (max-width: 767px) {
  ul.cambios li:not(.vacio) {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    /* fecha y premio compartian la celda `datos` y se pintaban uno ENCIMA
       del otro ("26/09/2020" sobre el premio, captura 2026-08-05): cada
       uno tiene ahora su fila. La de premio colapsa sola si esta vacia. */
    grid-template-areas: "estado titulo acciones" ". datos acciones" ". premio acciones";
    row-gap: 4px; padding: 10px !important;
  }
  ul.cambios li .oks { grid-area: estado; align-self: start; }
  ul.cambios li .cambio { grid-area: titulo; }
  ul.cambios li .fecha { grid-area: datos; }
  ul.cambios li .premio { grid-area: premio; }
  ul.cambios li .twitter, ul.cambios li .borrar { grid-area: acciones; align-self: center; }
  ul.cambios li .twitter { justify-content: flex-end; padding-right: 46px !important; }
  ul.cambios li .borrar { border-left: 0; }
  ul.cambios li a.twittear, ul.cambios li .borrar .btn-remove { width: 44px !important; height: 44px !important; }
}

/* --- 22.3 dialogo de confirmacion ---------------------------------------
   Breve y accesible. No sustituye a las paginas propias: se reserva a las
   acciones destructivas, donde interrumpir es justamente lo que se busca. */
.hp-dialogo-fondo {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(7, 19, 31, .45);
}
.hp-dialogo-fondo[hidden] { display: none; }
html.hp-dialogo-abierto { overflow: hidden; }
.hp-dialogo {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 14px; padding: 22px 22px 18px;
  box-shadow: 0 18px 48px rgba(7, 19, 31, .28);
  font-family: "Roboto", Arial, sans-serif;
}
.hp-dialogo h2 {
  margin: 0 0 8px; font-size: 19px; line-height: 25px; font-weight: 700; color: var(--hp-heading, #16283C);
}
.hp-dialogo p { margin: 0 0 18px; font-size: 14.5px; line-height: 21px; color: var(--hp-text-muted, #5B6B82); }
.hp-dialogo-pie { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.hp-dialogo-pie button {
  min-height: 44px; padding: 0 18px; border-radius: var(--hp-radius-pill, 999px);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.hp-dialogo-no { border: 1px solid var(--hp-border-strong, #C7D6E5); background: #fff; color: var(--hp-blue, #004FA0); }
.hp-dialogo-no:hover { background: var(--hp-surface-blue, #F3F7FC); }
/* 4,36:1 se quedaba justo por debajo del 4,5:1 de WCAG AA; #D32B23 da
   5,07:1 y la diferencia no se aprecia. El :hover ya cumplia. (2026-08-21) */
.hp-dialogo-si { border: 1px solid #D32B23; background: #D32B23; color: #fff; }
.hp-dialogo-si:hover { background: #C92B24; border-color: #C92B24; }
.hp-dialogo-pie button:focus-visible { outline: 2px solid var(--hp-blue, #004FA0); outline-offset: 2px; }
@media (max-width: 480px) {
  .hp-dialogo-pie { flex-direction: column-reverse; }
  .hp-dialogo-pie button { width: 100%; }
}

/* ===== §23 ALPHA 3 - Resumen ============================================
   Cabecera de indicadores, seccion de rueda con UNA sola interpretacion (la
   comun de Paso 1) y acordeones compactos. Solo presentacion. */

/* --- 23.1 cabecera de indicadores --------------------------------------- */
.hp-res-cabecera { margin-bottom: 18px; }
.hp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hp-kpi {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto;
  column-gap: 12px; row-gap: 2px; align-items: center;
  background: #fff; border: 1px solid var(--hp-border, #E4EBF3); border-radius: 14px; padding: 14px 16px;
}
.hp-kpi-ico, .hp-kpi-avatar {
  grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px;
  background: var(--hp-surface-blue, #F3F7FC); background-repeat: no-repeat; background-position: center; background-size: 22px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hp-kpi-avatar { border-radius: 50%; background-image: url("/styles/images/icon-user-cyan.svg"); }
.hp-kpi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hp-kpi-ruedas { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230057A8'%20stroke-width='2'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12 3v18M3 12h18'/%3E%3C/svg%3E"); }
.hp-kpi-cond { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230057A8'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.hp-kpi-cambios { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230057A8'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3 12a9 9 0 0 1 15-6.7L21 8M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath%20d='M21 4v4h-4M3 20v-4h4'/%3E%3C/svg%3E"); }
.hp-kpi-tit { grid-column: 2; font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--hp-text-muted, #5B6B82); overflow-wrap: anywhere; }
.hp-kpi-cifra { grid-column: 2; font-size: 30px; line-height: 34px; font-weight: 700; color: var(--hp-heading, #16283C); }
.hp-kpi-sub { grid-column: 2; font-size: 12.5px; line-height: 17px; color: var(--hp-text-muted, #5B6B82); }
.hp-kpi-perfil .hp-kpi-tit { font-size: 15px; color: var(--hp-heading, #16283C); font-weight: 700; }
.hp-kpi-link {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hp-divider, #EDF2F8);
  font-size: 13px; font-weight: 700; color: var(--hp-blue, #004FA0); text-decoration: none;
}
.hp-kpi-link::after { content: " ›"; }
.hp-kpi-link:hover { text-decoration: underline; }
.hp-res-acciones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hp-res-compartir, .hp-res-pdf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: var(--hp-radius-pill, 999px);
  font-family: "Roboto", Arial, sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.hp-res-compartir { border: 1px solid var(--hp-blue, #004FA0); background: var(--hp-blue, #004FA0); color: #fff; }
.hp-res-compartir:hover { background: var(--hp-blue-hover, #0A6FD6); }
.hp-res-pdf { border: 1px solid var(--hp-border-strong, #C7D6E5); background: #fff; color: var(--hp-blue, #004FA0); }
.hp-res-pdf.principal { border-color: var(--hp-blue, #004FA0); background: var(--hp-blue, #004FA0); color: #fff; }
.hp-res-compartir:focus-visible, .hp-res-pdf:focus-visible { outline: 2px solid var(--hp-blue, #004FA0); outline-offset: 2px; }
/* la descarga ya vive arriba: no se repite suelta al final */
.hp-summary-download-row { display: none !important; }

/* --- 23.2 seccion de rueda: sintesis + areas, y UNA interpretacion ------- */
.estado-evolucion .border { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 32px; align-items: center; }
.estado-evolucion .border > .col-md-6 { float: none !important; width: auto !important; padding: 0 !important; }
.hp-res-h3 { margin: 0 0 12px; font-size: 17px; line-height: 23px; font-weight: 700; color: var(--hp-blue, #004FA0); }
.hp-res-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.hp-res-hl { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.hp-res-hl b { grid-column: 2; font-size: 15.5px; line-height: 21px; color: var(--hp-heading, #16283C); }
.hp-res-hl span { grid-column: 2; font-size: 15px; line-height: 23px; color: var(--hp-text-muted, #5B6B82); max-width: 62ch; }
.hp-res-hl::before {
  content: ""; grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%;
  background: var(--hp-surface-blue, #F3F7FC) no-repeat center / 13px;
}
.hp-res-hl-fortalezas::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%2316A63A'%20d='m12 2 3 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.9 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.hp-res-hl-mejorar::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23F2A900'%20d='m12 2 3 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.9 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.hp-res-hl-sugerencia::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230057A8'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.estado-evolucion .hp-lectura-card { margin-top: 22px; }

/* --- 23.3 acordeones compactos ------------------------------------------ */
.hp-summary-section-title { margin: 0 !important; }
.container + .container:has(> .hp-summary-section-title) { margin-top: 14px; }
.hp-summary-panel:not(.hp-cerrada) > .hp-summary-panel-inner { padding-top: 14px; }

@media (max-width: 991px) {
  .hp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estado-evolucion .border { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
  .hp-kpi { padding: 12px; column-gap: 10px; }
  .hp-kpi-cifra { font-size: 26px; line-height: 30px; }
  .hp-res-acciones .hp-res-compartir, .hp-res-acciones .hp-res-pdf { flex: 1 1 100%; }
}

/* ===== 24 armonizacion Alpha 3 ==========================================
   Los globos que se pintan sobre lienzo (rueda, areas y subruedas) no pueden
   anclarse a una fila, asi que siguen el raton; pero comparten ya el aspecto
   del unico sistema de ayuda: mismo fondo, mismo radio, misma tipografia. */
.hp-tip.hp-tip-suelto { max-width: 280px; }
.hp-tip.hp-tip-suelto::after { display: none; }

/* ===== §25 HOTFIX menu movil ============================================
   El panel deja de ser un bloque en flujo (absolute z-100 anclado al
   documento, por debajo de la barra de areas sticky z-1000) y pasa a ser una
   capa por encima de todo lo que hay bajo la barra principal. */
@media (max-width: 767px) {
  nav.menu-mob {
    position: fixed !important;
    top: var(--hp-barra, 68px) !important;
    left: 0 !important; right: 0 !important; bottom: auto !important;
    z-index: 1002 !important;
    display: none !important;
    margin: 0 !important;
    max-height: calc(100vh - var(--hp-barra, 68px));
    max-height: calc(100dvh - var(--hp-barra, 68px));
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 14px 30px rgba(7, 19, 31, .30);
  }
  html.hp-menu-abierto nav.menu-mob { display: block !important; }
  /* OJO: aqui NO va overflow:hidden en html. Convierte html en scrollport y
     la barra principal deja de estar sticky (medido: se iba a top -400).
     El gesto se frena desde el controlador. */
  /* el velo empieza bajo la barra principal: esa se queda intacta y visible */
  .hp-menu-scrim {
    position: fixed; top: var(--hp-barra, 68px); left: 0; right: 0; bottom: 0;
    background: rgba(7, 19, 31, .45); z-index: 1000; touch-action: none;
  }
  .hp-menu-scrim[hidden] { display: none; }
  /* opciones de 54px: area tactil de sobra y sin franjas enormes */
  nav.menu-mob ul { padding: 0 !important; }
  nav.menu-mob ul li a {
    display: flex; align-items: center; justify-content: center;
    min-height: 54px; padding: 8px 16px !important;
    font-size: 16px; line-height: 21px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }
  nav.menu-mob ul li:last-child a { border-bottom: 0; }
}
/* fuera del movil no queda ni rastro */
@media (min-width: 768px) {
  .hp-menu-scrim { display: none !important; }
}

/* --- 22.4 Paso 3: separacion normal hasta la seccion siguiente ------------
   Medido en beta a 1366: el tablero NO reserva altura (722px = fondo de la
   columna mas alta, min-height 0). El hueco eran los 48px de margen del
   tablero mas los 32 del encabezado siguiente. Se deja la separacion del
   sistema. */
.add-premios-ordenacion { margin-bottom: 24px !important; }

/* ===== MOVIL: valoraciones compactas, con las proporciones de las subruedas
   El minmax(200px,1fr) que necesita el escritorio no cabe en un movil, y mi
   primer arreglo se paso al otro lado: flex:1 1 0 estiraba cada casilla a
   29-35 px y cada fila ocupaba 61 px. La referencia buena es la del sistema
   de diseno, §15.3: casilla de 10x10 con hueco de 3, que es la misma que usan
   las subruedas. Aqui se usa 11x11 y hueco 3, un pelo mayor por el dedo.
   Todo cabe en UNA fila: [icono+nombre] [circulo] [11 casillas]. */
@media (max-width: 767px) {
  .como-es .areas > ul > li {
    grid-template-columns: minmax(0, 1fr) 30px auto !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 5px 0 !important;
  }
  .como-es .areas > ul > li strong {
    white-space: normal !important;   /* los nombres largos pueden ir a dos lineas */
    overflow-wrap: anywhere;
    font-size: 13px !important;
    line-height: 17px !important;
    padding: 2px 0 2px 30px !important;
    background-size: 22px !important;
  }
  .como-es .areas > ul > li .hp-score {
    width: 30px !important; height: 30px !important; line-height: 28px !important;
    min-width: 30px !important; font-size: 13px !important;
  }
  .como-es .areas > ul > li .hp-bars {
    grid-column: auto !important;
    width: auto !important;
    justify-self: end !important;
    display: flex !important;
    gap: 3px !important;
  }
  .como-es .areas > ul > li .hp-bars .hp-seg {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    position: relative;
  }
  /* La forma es de 11 px, pero lo pulsable es mucho mayor: el pseudo-elemento
     amplia la diana a ~15x35 px sin tocar el dibujo ni la maquetacion. */
  .como-es .areas > ul > li .hp-bars .hp-seg::after {
    content: ""; position: absolute; top: -12px; bottom: -12px; left: -2px; right: -2px;
  }
  .como-es .areas, .como-es .areas > ul { overflow-x: hidden; }
}
/* El globo nunca intercepta el toque, ni en la rueda ni en las filas. */
.hp-tip, #hp-tip { pointer-events: none; }

/* Marca del texto original conservado, cuando una frase historica no puede
   rehacerse en el idioma activo sin arriesgar el sentido. Vivia dentro de
   paso_2.tpl, asi que en Paso 3 y en el Resumen la marca salia sin estilo.
   Discreta: informa, no alarma. */
.hp-i18n-original{display:inline-block;margin-right:6px;padding:1px 6px;
  border:1px solid #d7e0ea;border-radius:999px;background:#f4f8fc;
  color:#5B6B82;font-size:11px;line-height:16px;font-weight:600;
  vertical-align:1px;cursor:help}

/* Texto que escribio la propia persona: se distingue del conservado de
   catalogo, porque no son lo mismo y no se resuelven igual. */
.hp-i18n-original.es-libre{border-color:#dfe3d7;background:#f6f8f2;color:#5d6b52}

/* Lo escrito o retocado por la persona va en CURSIVA, sin pildora. Antes
   llevaba una etiqueta («Escrito por ti · Español», «Del catálogo ·
   personalizado por ti») que ocupaba un bloque, empujaba la frase y en movil
   le robaba una linea entera -- y aparecia en casi todas las filas, con lo
   que dejaba de distinguir nada. La cursiva dice lo mismo sin gritar.
   Decision de Pedro, 2026-08-08. */
.hp-texto-propio{font-style:italic}

/* =====================================================================
   Vista del informe (pdf.html) -- rescatado del worktree hp-wt-pdfa el
   2026-08-03 antes de retirarlo. Estaba en staged sin comitear desde
   julio: es un rediseno responsive de la pagina de informe que NO se
   habia incorporado por ninguna otra via (ni .hp-page-pdf ni
   .pdf-cabecera existian en la fuente). Es ortogonal al trabajo de
   idioma del PDF: aquel toca los textos, este la composicion.
   Patch original archivado con SHA-256
   d99d395b83271dcf6552c95d579da14261e91766a5146cd0a5220ad341e290fc
   ===================================================================== */
/* Hooks reales: .pdf-page, .pdf-cabecera, .imp-button-action, .imp-logo,
   #pdfwheel, #pdfevo, #hpq-mount. Datos/JS intactos. */
.hp-page-pdf { background: #F7FAFD; }
.hp-page-pdf .container {
  width: min(1180px, calc(100% - 48px));
  max-width: none;
  padding: 0;
  /* margen superior 0: la barra sticky de niveles queda pegada al menu
     principal; el aire lo pone la propia barra (regresion 2026-08-04) */
  margin: 0 auto 72px;
}
/* La fila interior del menu principal tambien usa .container: sin este
   reset heredaba los margenes de arriba y el nav crecia a 186px con un
   bloque vacio bajo los enlaces (regresion 2026-08-04). */
.hp-page-pdf .profile_head_nav .container {
  margin: 0;
  width: auto;
  max-width: 1180px;
}
.hp-page-pdf .imp-logo { text-align: left; margin: 0 0 16px; }
.hp-page-pdf .imp-logo img { max-height: 56px; width: auto; }
/* superficie del informe */
.hp-page-pdf .pdf-page {
  background: #FFFFFF;
  border: 1px solid #D6E2EE;
  border-radius: 16px;
  padding: 40px 48px;
  width: auto;
  max-width: none;
  margin: 0;
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 25px;
  color: #2D4054;
}
/* cabecera documental */
.hp-page-pdf .pdf-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 2px solid #D6E2EE;
}
.hp-page-pdf .pdf-cabecera h1 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #101923;
  text-transform: none;
  margin: 0 0 6px;
}
.hp-page-pdf .pdf-cabecera .pdf-meta {
  font-size: 15px;
  line-height: 22px;
  color: #5B6F83;
  margin: 0;
  max-width: none;
}
/* boton Imprimir (solo pantalla; noprint ya existe) */
.hp-page-pdf .imp-button-action { margin: 0; }
.hp-page-pdf .imp-button-action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #0057A8 !important;
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  text-transform: none;
}
.hp-page-pdf .imp-button-action .btn:hover { background: #004488 !important; }
/* jerarquia documental */
.hp-page-pdf .pdf-page h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #0B4F91;
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #D6E2EE;
  text-transform: none;
}
.hp-page-pdf .pdf-page h3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: #0B4F91;
  margin: 28px 0 12px;
}
.hp-page-pdf .pdf-page h4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #2D4054;
  margin: 20px 0 8px;
}
.hp-page-pdf .pdf-page p { max-width: 900px; margin: 0 0 24px; font-size: 16px; line-height: 25px; }
.hp-page-pdf .pdf-page ul { max-width: 900px; margin: 0 0 24px; }
.hp-page-pdf .pdf-page li { margin: 6px 0; }
/* bloques de grafico delimitados (sin wrappers nuevos: se usan los <p> del canvas) */
.hp-page-pdf .pdf-page p:has(> canvas),
.hp-page-pdf #hpq-mount {
  background: #FFFFFF;
  border: 1px solid #D6E2EE;
  border-radius: 14px;
  padding: 24px;
  margin: 20px 0 32px;
  max-width: none;
  break-inside: avoid;
  page-break-inside: avoid;
}
/* rueda centrada y contenida */
.hp-page-pdf #pdfwheel { width: min(100%, 460px) !important; height: auto !important; margin: 0 auto; }
/* Movil */
@media (max-width: 767px) {
  .hp-page-pdf .container { width: calc(100% - 32px); margin: 0 auto 48px; }
  .hp-page-pdf .pdf-page { padding: 24px 20px; border-radius: 12px; }
  .hp-page-pdf .pdf-cabecera { flex-direction: column; gap: 12px; }
  .hp-page-pdf .pdf-cabecera h1 { font-size: 26px; line-height: 34px; }
  .hp-page-pdf .pdf-page h2 { font-size: 21px; line-height: 29px; }
}

/* =====================================================================
   Paso 2 en movil: la condicion, compacta (2026-08-03)
   A 390 px la fila gastaba 68 px de sangria izquierda y 46 de derecha
   -- 114 de 390, casi un tercio -- para dos controles de 22 y 28 px, y
   una condicion corta como "That my job is" partia en dos lineas.
   Se pasa a rejilla explicita [arrastre][estado][texto][borrar]: el
   texto recibe todo el ancho sobrante y las columnas ocupan lo suyo.
   Nada de position:absolute con sangrias adivinadas.
   El area tactil se mantiene en 44x44 aunque el dibujo sea menor.
   ===================================================================== */
@media (max-width: 640px) {
  /* Rejilla por NOMBRE de columna: asa, estado, texto y borrar van cada uno a
     la suya. Los nombres se declaran AQUI MISMO y la plantilla lleva
     !important. Si otra regla importante gana el grid-template, los nombres
     desaparecen, `grid-column: estado` pasa a apuntar a una linea inexistente
     y el navegador inventa columnas implicitas que apilan los hijos en
     vertical: es literalmente lo que le paso al Paso 3 el 2026-08-03, y por
     eso el Paso 3 tiene ahora su propio bloque, mas abajo. */
  .add-deseos-ordenacion .listado ul li {
    display: grid !important;
    grid-template-columns: [asa] auto [estado] auto [texto] minmax(0, 1fr) [borrar] auto !important;
    align-items: center;
    gap: 6px;
    padding: 7px 8px !important;
    margin: 0 0 6px !important;
    min-height: 46px;
  }
  /* Fuera del flujo absoluto: cada control ocupa su celda. */
  .add-deseos-ordenacion .listado ul li .move,
  .add-deseos-ordenacion .listado ul li .oks,
  .add-deseos-ordenacion .listado ul li .actions {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
  }
  .add-deseos-ordenacion .listado ul li .move {
    grid-column: asa; width: 20px; height: 34px;
  }
  .add-deseos-ordenacion .listado ul li .oks {
    grid-column: estado; display: flex; align-items: center; justify-content: center;
  }
  .add-deseos-ordenacion .listado ul li .hp-a3-txt {
    grid-column: texto; min-width: 0; overflow-wrap: anywhere;
    /* Las largas envuelven; NUNCA se truncan: la persona escribio eso. */
    display: block; -webkit-line-clamp: none; line-height: 19px;
  }
  .add-deseos-ordenacion .listado ul li .actions {
    grid-column: borrar; display: flex; align-items: center; justify-content: flex-end;
  }
  /* Borrar sin circulo ni adorno: solo el aspa. El area pulsable sigue
     siendo de 44x44 con un pseudo-elemento invisible, asi que el dedo
     acierta igual aunque el dibujo ocupe 20 px. */
  .add-deseos-ordenacion .listado ul li .actions .remove {
    position: relative;
    width: 24px; height: 24px;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: .62;
  }
  .add-deseos-ordenacion .listado ul li .actions .remove::after {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px;          /* objetivo tactil, invisible */
  }
  .add-deseos-ordenacion .listado ul li .actions .remove:hover,
  .add-deseos-ordenacion .listado ul li .actions .remove:focus-visible {
    opacity: 1;
  }
  /* El foco NO se pierde al quitar el fondo: sigue habiendo anillo. */
  .add-deseos-ordenacion .listado ul li .actions .remove:focus-visible {
    outline: 2px solid var(--hp-blue-bright, #0A6FD6);
    outline-offset: 2px;
  }
  /* La marca de original conservado pasa a metadato secundario: ocupaba
     una linea entera por encima del propio texto de la condicion. */
  .add-deseos-ordenacion .listado ul li .hp-i18n-original {
    font-size: 10.5px; line-height: 14px; padding: 1px 5px;
    margin: 0 5px 0 0; border-radius: 4px; vertical-align: 1px;
    white-space: nowrap; opacity: .78;
  }
}
@media (max-width: 380px) {
  .add-deseos-ordenacion .listado ul li {
    grid-template-columns: [asa] auto [estado] auto [texto] minmax(0, 1fr) [borrar] auto !important;
    gap: 5px; padding: 6px 7px !important;
  }
}

/* =====================================================================
   Paso 3 en movil: su propia fila (2026-08-03)
   El Paso 3 NO tiene asa de arrastre. Su fila son tres piezas:
   .oks (estado) + .hp-a3-txt (la condicion) + .actions (escribir/sugerir).
   Hasta ahora heredaba la rejilla del Paso 2 y salia rota: la linea 3037
   (`.add-premios-ordenacion ... !important`) ganaba el grid-template con
   solo tres pistas SIN NOMBRE, asi que los `grid-column: estado|texto|
   borrar` del bloque de arriba apuntaban a lineas inexistentes; el
   navegador creaba columnas implicitas y las tres piezas se apilaban en
   vertical -- filas de 157 px, texto de 230 px y hueco a la derecha.
   Aqui la plantilla se declara con sus nombres y con !important, para que
   nombres y colocacion no puedan separarse nunca.
   Las columnas van a 44 px, no a los 36 orientativos: son los objetivos
   tactiles de estado y de editar, y bajarlos rompe el minimo accesible.
   ===================================================================== */
@media (max-width: 640px) {
  .add-premios-ordenacion .listado ul li {
    display: grid !important;
    grid-template-columns: [estado] 44px [texto] minmax(0, 1fr) [editar] 44px !important;
    align-items: center;
    gap: 6px;
    padding: 6px 8px !important;
    margin: 0 0 6px !important;
    min-height: 56px;
    height: auto !important;
  }
  /* Fuera del flujo absoluto heredado: cada pieza ocupa su celda. */
  .add-premios-ordenacion .listado ul li .oks,
  .add-premios-ordenacion .listado ul li .actions {
    position: static !important;
    transform: none !important;
    left: auto !important; right: auto !important; top: auto !important;
    margin: 0 !important;
    width: 44px !important; height: 44px !important;
    display: flex; align-items: center; justify-content: center;
  }
  .add-premios-ordenacion .listado ul li .oks    { grid-column: estado; }
  .add-premios-ordenacion .listado ul li .actions { grid-column: editar; }
  /* El `onclick` esta en el div de dentro, no en .oks, asi que el objetivo
     tactil real eran sus 28x28. Se estira a los 44x44 de su propia celda --
     no con un pseudo-elemento, que se solaparia con el texto de al lado y le
     robaria las pulsaciones. El dibujo sigue midiendo 22 px: es la imagen de
     fondo, no la caja. */
  .add-premios-ordenacion .listado ul li .oks .btn-ok,
  .add-premios-ordenacion .listado ul li .oks .btn-no-ok {
    /* !important porque la linea 2811 fija 28x28 tambien con !important y, sin
       esto, gana ella aunque este antes. */
    width: 44px !important; height: 44px !important;
    background-size: 22px !important;
  }
  .add-premios-ordenacion .listado ul li .hp-a3-txt {
    grid-column: texto;
    min-width: 0;
    overflow-wrap: anywhere;
    /* Las condiciones largas ENVUELVEN; no se truncan: lo escribio la persona. */
    display: block; -webkit-line-clamp: none; line-height: 19px;
    padding: 2px 0;
  }
  /* El boton de escribir/sugerir: 44x44 de area, dibujo centrado. */
  .add-premios-ordenacion .listado ul li .actions .hp-cambio-accion {
    width: 44px !important; height: 44px !important;
    margin: 0 !important;
  }
  .add-premios-ordenacion .listado ul li .actions .hp-cambio-accion:focus-visible {
    outline: 2px solid var(--hp-blue-bright, #0A6FD6);
    outline-offset: 2px;
  }
  /* La marca de original conservado, metadato en linea y no renglon propio. */
  .add-premios-ordenacion .listado ul li .hp-i18n-original {
    font-size: 10.5px; line-height: 14px; padding: 1px 5px;
    margin: 0 5px 0 0; border-radius: 4px; vertical-align: 1px;
    white-space: nowrap; opacity: .78;
  }
  /* Zonas de soltar: compactas. 120 px de alto minimo por columna vacia son
     tres pantallas de aire en un movil. */
  .add-premios-ordenacion .listado ul.connectedSortable { min-height: 52px; }
  .add-premios-ordenacion .listado span.vacio {
    padding: 9px 10px; font-size: 12.5px; line-height: 17px;
  }
}
@media (max-width: 380px) {
  .add-premios-ordenacion .listado ul li {
    grid-template-columns: [estado] 44px [texto] minmax(0, 1fr) [editar] 44px !important;
    gap: 5px; padding: 6px 6px !important;
  }
}


/* =====================================================================
   Condensacion movil de las listas de condiciones y cambios
   (Pedro, 2026-08-04): menos aire vertical, sombra baja y margenes
   horizontales a la mitad, conservando 44px tactiles.

   OJO CON LAS REJILLAS: a <=640 la fila se maqueta por COLUMNAS CON
   NOMBRE ([asa][estado][texto][borrar], bloque de arriba) y pisar su
   grid-template con columnas numericas borra los nombres y APILA los
   hijos (paso ya el 2026-08-03 en el Paso 3, y otra vez el 2026-08-04
   con la primera version de este bloque). Por eso las columnas numericas
   solo se tocan de 641 a 880, y a <=640 se re-declara la plantilla CON
   sus nombres.
   ===================================================================== */
@media (max-width: 880px) {
  /* aire vertical y sombra: esto no toca ninguna rejilla */
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    min-height: 44px;
    margin: 0 0 3px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
  }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .hp-a3-txt {
    padding-top: 0; padding-bottom: 0;
  }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado h3 {
    padding-top: 5px; padding-bottom: 5px; margin-bottom: 2px;
  }
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul {
    padding-top: 1px; padding-bottom: 1px;
  }
  ul.cambios li {
    padding: 6px 10px !important;
    margin: 0 0 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
  }
  ul.cambios li.hp-grupo-cambios {
    padding: 10px 0 4px !important;
    box-shadow: none !important;
  }
}
/* Papelera coherente por tramo (Pedro, 2026-08-05): en tactil (<=1024) es
   SIEMPRE el cuadrado de 44px con el icono lineal, sin el disco de
   escritorio; el disco de 28px con borde queda solo para >=1025 con hover.
   En el tramo 641-1024 se mezclaban a medias (44px + radio 50% + borde +
   icono de 14px) y parecia un circulo dentro de otro, ademas de desbordar
   la columna estrecha. */
@media (max-width: 1024px) {
  :is(.add-deseos-ordenacion, .add-premios-ordenacion) .listado ul li .actions .remove {
    width: 44px !important; height: 44px !important;
    border-radius: 8px !important; border: 0 !important;
    background-color: transparent !important;
    background-size: 21px !important;
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235B6B82'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='3%206%205%206%2021%206'/%3E%3Cpath%20d='M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'/%3E%3Cline%20x1='10'%20y1='11'%20x2='10'%20y2='17'/%3E%3Cline%20x1='14'%20y1='11'%20x2='14'%20y2='17'/%3E%3C/svg%3E") !important;
  }
}
@media (min-width: 641px) and (max-width: 880px) {
  /* CADA lista con SU plantilla (leccion del 2026-08-05: unificarlas rompio
     el Paso 3, cuyos hijos se colocan por los nombres estado/texto/editar).
     Deseos (Paso 2): numerica estrechada, asa+estado+texto+papelera. */
  .add-deseos-ordenacion .listado ul li {
    /* MISMA metrica que a <=640: sin salto de espaciado al cruzar el corte
       (Pedro, 2026-08-05: "a poca resolucion se pega, un poco mas ancho se
       separa"). 44px de columna para un circulo de 44: ni pegado ni bailando. */
    grid-template-columns: 44px 44px minmax(0, 1fr) 44px !important;
    gap: 0 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  /* Premios (Paso 3): sus hijos son estaticos desde el bloque base y solo
     saben colocarse por nombre; sin esta plantilla el texto caia en una
     columna de 34px y se leia en vertical. */
  .add-premios-ordenacion .listado ul li {
    grid-template-columns: [estado] 44px [texto] minmax(0, 1fr) [editar] 44px !important;
    gap: 0 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .add-premios-ordenacion .listado ul li .oks     { grid-column: estado; }
  .add-premios-ordenacion .listado ul li .hp-a3-txt { grid-column: texto; min-width: 0; }
  .add-premios-ordenacion .listado ul li .actions { grid-column: editar; }
}
@media (max-width: 640px) {
  /* cada lista re-declara SU plantilla con nombres, encogiendo hueco y lados */
  .add-deseos-ordenacion .listado ul li {
    /* columnas FIJAS: `auto` dejaba [estado] mas estrecho que su circulo de
       44 y el circulo se montaba sobre el texto (captura 2026-08-05) */
    grid-template-columns: [asa] 44px [estado] 44px [texto] minmax(0, 1fr) [borrar] 44px !important;
    gap: 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .add-premios-ordenacion .listado ul li {
    grid-template-columns: [estado] 44px [texto] minmax(0, 1fr) [editar] 44px !important;
    gap: 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* ===== Cambios ya marcados en pantalla ESTRECHA (2026-08-11) =============
   Con seis columnas el telefono no da: fecha y premio pasan a una segunda
   fila bajo el texto, y las dos acciones (X y papelera) quedan arriba a la
   derecha sin pisar nada. Ancla: la captura de Pedro con el «regalo»
   cortado detras de los botones. */
@media (max-width: 560px) {
  ul.cambios li:not(.vacio) {
    grid-template-columns: 34px minmax(0, 1fr) 40px 40px;
    grid-template-rows: auto auto auto;
  }
  ul.cambios li .oks    { grid-row: 1; grid-column: 1; }
  ul.cambios li .cambio { grid-row: 1; grid-column: 2; }
  ul.cambios li .twitter{ grid-row: 1; grid-column: 3; }
  ul.cambios li .borrar { grid-row: 1; grid-column: 4;
    border-left: 0; padding-left: 0 !important; margin-left: 0 !important; }
  /* cada dato en su fila: dos items del grid en la misma celda se pisan;
     los div vacios miden 0 y no dejan hueco */
  ul.cambios li .fecha  { grid-row: 2; grid-column: 2 / 5; }
  ul.cambios li .premio { grid-row: 3; grid-column: 2 / 5; }
}

/* ---- FUENTE MINIMA DE 16px EN LOS CONTROLES, SOLO EN MOVIL (2026-08-23) ----
   iOS hace zoom al enfocar cualquier campo con fuente menor de 16px, y al
   ampliar descoloca la pagina entera; el usuario tiene que volver a colocarla
   a mano. Medido en el navegador a 320/360/440 el 23/08: el selector de
   subruedas del paso 1 daba 15px (linea 977), y tambien el editor de cambios
   y Mi cuenta. styles.css ya lo intentaba en su media query, pero reglas
   posteriores lo devolvian a 15.
   Comprobado en vivo: la caja del select NO cambia de tamano (310x48 antes y
   despues) y no aparece ningun desbordamiento. Solo movil: en escritorio no
   hay zoom y la tipografia se respeta tal cual. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; }
}

/* Ajustes tactiles y de legibilidad verificados (2026-08-26).
   Este bloque consolida reglas compartidas que antes quedaron mezcladas con
   instrucciones de parche. Todas estan acotadas por ancho o tipo de puntero. */
@media (max-width: 767px) {
  ul.cambios-pendientes li .premio {
    white-space: normal;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .hp-sp-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hp-sp-accion > * + * { margin-top: 10px; }

  .add-deseos .archivo .construir { gap: 0; }
  .add-deseos .archivo .construir > * + * { margin-top: 10px; }

  .hp-a3-entrada .hp-a3-vias { gap: 0; }
  .hp-a3-entrada .hp-a3-via + .hp-a3-via { margin-left: 8px; }

  ul.cambios-pendientes li .cambio {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {
  .add-deseos-ordenacion .listado ul li .move {
    width: 44px !important;
    height: 44px !important;
  }
  .add-deseos-ordenacion .listado ul li .oks {
    width: 44px;
    height: 44px;
  }
  .add-deseos-ordenacion .listado ul li .oks .btn-ok,
  .add-deseos-ordenacion .listado ul li .oks .btn-no-ok {
    width: 44px !important;
    height: 44px !important;
    background-size: 22px !important;
  }
}

@media (max-width: 560px) {
  ul.cambios li:not(.vacio) {
    grid-template-columns: 34px minmax(0, 1fr) 44px 44px;
  }
  ul.cambios li .twitter { padding-right: 0 !important; }
}

@media (max-width: 380px) {
  .como-es .areas > ul > li {
    grid-template-columns: minmax(0, 1fr) 30px !important;
  }
  .como-es .areas > ul > li .hp-bars {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    padding-bottom: 4px;
  }
}

@media (hover: none), (pointer: coarse) {
  .hp-cambio-vias { gap: 0; }
  .hp-cambio-via { min-height: 44px; }
  .hp-cambio-via + .hp-cambio-via { margin-left: 2px; }
  .hp-cambio-sug .hp-sug-op {
    min-height: 44px;
    padding: 12px 10px;
    margin-bottom: 2px;
  }
  .hp-cambio-sug .hp-sug-op:last-child { margin-bottom: 0; }
}

@media (pointer: coarse) and (max-width: 767px) {
  .rl2-iconos { gap: 22px; }
}

@media (hover: none) {
  .hp-hist .mini-del::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
}

/* =========================================================================
   LA BANDA SUPERIOR DE LAS PAGINAS DE DOCUMENTO
   =========================================================================
   Pedro, senalando el prototipo /revision-premium-2030/: «lo que te he pedido
   de esas paginas es el estilo del cuadro superior (sin el menu superior), y
   eso en cuatro paginas».

   Mi primera version era la misma idea ENCOGIDA: un panel redondeado dentro
   del contenedor, con el titular a 4rem. El prototipo es otra cosa:

       ancho COMPLETO de ventana, sin esquinas redondeadas
       muy alta -- padding de hasta 170px arriba y abajo
       titular enorme, hasta 7,5rem, con interlineado 0,88
       marca de agua gigante, cortada por arriba
       entradilla con una raya delante

   Por eso la banda vive FUERA del `.container` en las plantillas: a ancho
   completo dentro de un contenedor solo se llega con trucos de 100vw que
   sacan barra horizontal. La seccion pone el fondo y su propio `.container`
   mantiene el texto alineado con el resto de la pagina.

   Cada documento tiene ademas SU color y SU simbolo, que es lo que hace que la
   pagina se reconozca de un vistazo. Comprobado regla por regla en premium.css:
       aviso legal  crema y el signo de parrafo
       privacidad   menta y el circulo
       preguntas    azul  y la interrogacion
       contacto     azul con destello magenta y la flecha inclinada
   ========================================================================= */
.hp-doc-banda {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 190px) 0;
  margin: 0 0 clamp(34px, 5vw, 76px);
}
.hp-doc-banda > .container { position: relative; z-index: 1; }

/* LA FRANJA DE DEBAJO, cuando la pagina la necesita. Contacto tiene el
   formulario sobre un fondo claro, y ese fondo vivia dentro de `.container`:
   se cortaba a los lados y dejaba dos franjas blancas a izquierda y derecha
   --lo que Pedro recuadro el 28/08-- mas una tercera arriba, por el margen que
   la banda deja debajo.

   El hueco de la banda existe para separarla del TEXTO, no de otro fondo: si
   debajo va otra franja a ancho completo, se pegan. */
.hp-doc-cuerpo {
  background: #F3F7FC;   /* el mismo --paper-2, escrito literal porque esta
                            seccion vive FUERA de `.hp2030` y sus variables
                            solo llegan a los descendientes */
  padding: clamp(36px, 5vw, 62px) 0 clamp(64px, 8vw, 104px);
}
.hp-doc-banda:has(+ .hp-doc-cuerpo) { margin-bottom: 0; }

/* La marca de agua: enorme y cortada por arriba, como en el prototipo. */
.hp-doc-banda::after {
  position: absolute;
  right: 3vw;
  top: -12vw;
  font-size: min(42vw, 620px);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

/* La entradilla, con su raya delante. */
.hp-doc-banda .eyebrow,
.hp-doc-banda .hp-faq-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 clamp(18px, 2.4vw, 34px);
}
.hp-doc-banda .eyebrow::before,
.hp-doc-banda .hp-faq-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 2px;
  background: currentColor;
  opacity: .55;
}

/* EL TITULAR, con los numeros del prototipo medidos en premium.css, no con
   los mios. Fui rebajandolo dos veces --primero 4rem de tope, luego 7,4-- y las
   dos veces era la misma cautela: un titular de 9rem asusta escrito, y en la
   pagina es exactamente lo que Pedro recuadro en rojo. */
.hp-doc-banda h1 {
  font-family: Inter, "Roboto", Arial, sans-serif;
  font-size: clamp(4.2rem, 8vw, 9rem);
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 900;
  max-width: 12ch;
  margin: 0 0 clamp(20px, 2.6vw, 36px);
  text-transform: none;
  text-wrap: balance;
}

/* La entradilla de abajo. */
.hp-doc-banda .meta,
.hp-doc-banda .hp-faq-sub {
  font-size: clamp(16px, 1.4vw, 19.5px);
  line-height: 1.5;
  max-width: 58ch;
  margin: 0;
}
.hp-doc-banda .badges { margin-top: clamp(20px, 2.4vw, 32px); display: flex; flex-wrap: wrap; gap: 8px; }
.hp-doc-banda .badges span {
  font-size: 12.5px; line-height: 18px; font-weight: 600;
  border-radius: 999px; padding: 5px 13px; border: 1px solid;
}

/* --- Y el color y el simbolo de cada una --------------------------------- */

/* Aviso legal: crema. */
.hp-page-legal.hp-doc-aviso .hp-doc-banda { background: #F7F1E3; color: #061A33; }
.hp-page-legal.hp-doc-aviso .hp-doc-banda h1 { color: #061A33; }
.hp-page-legal.hp-doc-aviso .hp-doc-banda .eyebrow,
.hp-page-legal.hp-doc-aviso .hp-doc-banda .meta { color: #38404C; }
.hp-page-legal.hp-doc-aviso .hp-doc-banda::after { content: "\0000A7"; color: rgba(0, 79, 160, .08); }
.hp-page-legal.hp-doc-aviso .hp-doc-banda .badges span {
  color: #14304F; background: rgba(0, 79, 160, .07); border-color: rgba(0, 79, 160, .22);
}

/* Privacidad: menta. */
.hp-page-legal.hp-doc-privacidad .hp-doc-banda {
  background: linear-gradient(135deg, #D8F8EC, #9FE8CF); color: #061A33;
}
.hp-page-legal.hp-doc-privacidad .hp-doc-banda h1 { color: #061A33; }
.hp-page-legal.hp-doc-privacidad .hp-doc-banda .eyebrow,
.hp-page-legal.hp-doc-privacidad .hp-doc-banda .meta { color: #063A58; }
.hp-page-legal.hp-doc-privacidad .hp-doc-banda::after { content: "\0025C9"; color: rgba(0, 79, 160, .08); }
.hp-page-legal.hp-doc-privacidad .hp-doc-banda .badges span {
  color: #06334F; background: rgba(6, 26, 51, .07); border-color: rgba(6, 26, 51, .2);
}

/* Preguntas frecuentes: azul oscuro, la unica de las tres. */
.hp-page-faq .hp-doc-banda {
  background: linear-gradient(120deg, #07131F, #004FA0); color: #fff;
}
.hp-page-faq .hp-doc-banda .hp-faq-h1 { color: #fff; }
.hp-page-faq .hp-doc-banda .hp-faq-eyebrow { color: #9FC4E8; }
.hp-page-faq .hp-doc-banda .hp-faq-sub { color: #CFE0F1; }
.hp-page-faq .hp-doc-banda::after { content: "?"; color: rgba(255, 255, 255, .07); }

/* Contacto: azul profundo con un destello magenta y la flecha inclinada. Es la
   unica de las cuatro que lleva dos capas de fondo: el radial va DELANTE en la
   lista porque en CSS la primera capa es la de arriba. */
.hp-page-contacto .hp-doc-banda {
  background:
    radial-gradient(circle at 88% 20%, rgba(237, 0, 140, .8), transparent 26%),
    linear-gradient(135deg, #061A33, #0054A6);
  color: #fff;
}
.hp-page-contacto .hp-doc-banda h1 { color: #fff; }
.hp-page-contacto .hp-doc-banda .eyebrow { color: #9FC4E8; }
.hp-page-contacto .hp-doc-banda .meta { color: #CFE0F1; }
.hp-page-contacto .hp-doc-banda::after {
  content: "92";
  color: rgba(255, 255, 255, .08);
  transform: rotate(-18deg);
}

@media (max-width: 767px) {
  .hp-doc-banda { padding: clamp(56px, 14vw, 84px) 0; }
  .hp-doc-banda h1 { font-size: clamp(3.2rem, 15vw, 5rem); max-width: 11ch; }
  .hp-doc-banda::after { font-size: 58vw; top: -12vw; right: -2vw; }
}