/* P5 · una hoja centrada, con el cierre y la opción Gratis siempre accesibles. */
.overlay[data-planes-espera] { display: none !important; }
.pb-overlay { z-index: 48; justify-content: center; align-items: center; padding: 18px; background: var(--velo); }
.pb-dialogo { box-sizing: border-box; width: min(1080px, 100%); max-height: calc(100vh - 36px); min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--hoja); color: var(--papel); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); box-shadow: var(--sombra-3); }
/* ESCALERA DE ENTRADA (04/11/2026): la frase de Core (79 → 149 → 249 € y la oferta de lanzamiento hasta el 31/12/2026) ocupa
   seis renglones y el resumen desbordaba su diálogo a 1366×768 (planes-compactos-iva I02-I05: ~90 px de más). Se recogen
   márgenes, interlineado de las listas y el cuerpo de la promoción; los botones siguen a 44 px y el desplegable a 32 px. */
.pb-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--costura); }
.pb-cabecera h2 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.pb-cuerpo { min-height: 0; min-width: 0; overflow: auto; padding: 10px 18px; }
.pb-descripcion { margin: 0 0 8px; color: var(--papel-apagado); line-height: 1.45; }
.pb-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pb-tarjeta { min-width: 0; padding: 10px 12px; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); background: var(--superficie); overflow-wrap: anywhere; }
.pb-tarjeta h3 { margin: 0 0 4px; font-size: 1.05rem; }
.pb-etiqueta { margin: 0 0 8px; color: var(--cobalto-claro); font-size: .86rem; font-weight: 650; }
.pb-precio { margin: 0 0 10px; font-size: .95rem; line-height: 1.45; font-weight: 650; }
/* Promoción de entrada (18/10/2026): pegada al precio, en el color de acción. Su condición es la misma en todos los planes:
   va una vez, en pequeño, bajo las tarjetas (22/10/2026; repetida en cada una, el resumen no cabía a 1366×768). */
.pb-precio:has(+ .pb-promo) { margin-bottom: 2px; }
.pb-promo { margin: 0 0 10px; font-size: .8rem; line-height: 1.35; font-weight: 650; color: var(--cobalto-claro); }
.pb-promo-condicion { margin: 6px 0 0; font-size: .78rem; line-height: 1.35; color: var(--papel-apagado); }
.pb-limites, .pb-incluye { margin: 6px 0; font-size: .83rem; line-height: 1.3; }
.pb-limites { padding-left: 18px; }
.pb-incluye { padding: 0; }
.pb-incluye ul { padding-left: 18px; margin: 0; }
.pb-incluye-mas { margin-top: 4px; }
.pb-incluye-mas summary { cursor: pointer; font-weight: 600; padding: 6px 0; min-height: 32px; box-sizing: border-box; }
.pb-incluye-mas[open] ul { margin-top: 8px; }
.pb-limites li, .pb-incluye li { margin-bottom: 3px; }
.pb-estado, .pb-nota { color: var(--papel-apagado); }
.pb-mejorar { width: 100%; white-space: normal; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.pb-comprar-caja { margin-top: 10px; font-size: calc(1em / .83); }   /* dentro de .pb-incluye (.83rem): el botón copia, del mismo tamaño que el de la tarjeta */
.pb-solicitud { margin: 8px 0; font-size: .84rem; line-height: 1.5; }
.pb-solicitud:empty { display: none; }
.pb-detalle { margin-top: 8px; }
.pb-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--costura); }
.pb-nota { font-size: .83rem; line-height: 1.5; margin: 0; }
.pb-gratis, .pb-cerrar { font: inherit; cursor: pointer; min-height: 44px; color: var(--papel); background: transparent; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); }
.pb-gratis { padding: 10px 16px; flex-shrink: 0; }
.pb-cerrar { position: relative; width: 44px; flex-shrink: 0; }
.pb-cerrar::after { content: '×'; font-size: 1.6rem; }
.pb-cerrar-texto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.pb-dialogo button:focus-visible, .pb-dialogo a:focus-visible, .pb-dialogo summary:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 3px; }
.pb-dialogo button:disabled { cursor: default; }
@media (max-width: 900px) { .pb-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .pb-overlay { padding: 10px; }
  .pb-dialogo { max-height: calc(100vh - 20px); }
  .pb-cabecera, .pb-cuerpo, .pb-pie { padding: 14px; }
  .pb-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .pb-pie { flex-direction: column; align-items: stretch; }
  .pb-gratis { width: 100%; white-space: normal; }
}
/* PLANES A LA VISTA (18/10/2026): el acceso fijo de la cabecera (planes-bienvenida.js, actualizarCabecera). En ancho,
   «Plan Gratis · Ver planes» con borde para que se vea; en móvil la cabecera es de iconos (estilos.css, ≤640 px) y aquí
   queda «Ver planes» en texto: es lo que se busca, y su nombre accesible coincide con lo que se ve. */
.nav-boton.pb-plan-cabecera { color: var(--papel); border-color: var(--costura-fuerte); }
.nav-boton.pb-plan-cabecera .pb-cab-plan { color: var(--papel-apagado); }
.nav-boton.pb-plan-cabecera:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; }
.pb-plan-cabecera .pb-cab-corto { display: none; }
@media (max-width: 640px) {
  .nav-boton.pb-plan-cabecera { font-size: .8rem; width: auto; padding: 0 9px; }
  .pb-plan-cabecera .pb-cab-ver { display: none; }
  .pb-plan-cabecera .pb-cab-corto { display: inline; }
  /* movimiento.css pinta un icono-máscara en cada .nav-boton a ≤640 px: sin icono propio sale un cuadrado negro. Este va en texto. */
  html .nav-boton.pb-plan-cabecera::before { display: none; }
  .pb-plan-cabecera .pb-cab-plan, .pb-plan-cabecera .pb-cab-sep { display: none; }
}
/* ARREGLOS 1.0.4 (28/10/2026): el plan siempre a la vista. En la cabecera, sin borde ni invitación cuando no hay nada que contratar;
   en Cuenta, un rótulo junto al título que no se mueve de pestaña a pestaña. */
.nav-boton.pb-plan-cabecera.pb-plan-discreto { border-color: transparent; background: transparent; color: var(--papel-apagado); font-size: .86rem; }
.nav-boton.pb-plan-cabecera.pb-plan-discreto .pb-cab-plan { color: inherit; }
.pb-cuenta-plan { margin-right: auto; margin-left: 6px; font-size: .86rem; color: var(--papel-apagado); }
@media (max-width: 640px) {
  .nav-boton.pb-plan-cabecera.pb-plan-discreto { padding: 0 6px; }
  .pb-cuenta-plan { font-size: .8rem; }
}
