/* ==========================================================================
   Albunea — panel de control. Solo usa variables de /css/tokens.css y
   componentes de /css/base.css (prefijo pn- para lo propio del panel).
   ========================================================================== */

/* --- Barra lateral «cielo nocturno»: índigo en claro, noche en oscuro ------- */
.pn-lateral {
  --pn-lat-fondo: var(--alb-superficie-inversa);
  --pn-lat-texto: var(--alb-texto-inverso);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .pn-lateral { --pn-lat-fondo: var(--alb-fondo); --pn-lat-texto: var(--alb-texto); }
}
:root[data-tema="oscuro"] .pn-lateral { --pn-lat-fondo: var(--alb-fondo); --pn-lat-texto: var(--alb-texto); }

body { min-height: 100vh; }
.pn-app { min-height: 100vh; }
.pn-oculto { display: none !important; }
.pn-noscript { padding: var(--alb-espacio-5); }
.pn-ancho-total { width: 100%; }
.pn-espaciado { margin-top: var(--alb-espacio-5); }

.pn-icono { width: 20px; height: 20px; flex: none; }
.pn-icono--grande { width: 32px; height: 32px; }
.pn-icono--aviso { width: 20px; height: 20px; color: var(--_texto); margin-top: 1px; }

/* Arranque */
.pn-arranque { display: grid; place-items: center; min-height: 100vh; }
.pn-arranque img { animation: pn-respirar 1.6s ease-in-out infinite; }
@keyframes pn-respirar { 50% { opacity: 0.45; transform: scale(0.96); } }

/* Saltar al contenido */
.pn-saltar {
  position: absolute; left: var(--alb-espacio-3); top: -100px; z-index: var(--alb-z-aviso);
  padding: var(--alb-espacio-2) var(--alb-espacio-4);
  background: var(--alb-primario); color: var(--alb-sobre-primario); border-radius: var(--alb-radio-m);
}
.pn-saltar:focus { top: var(--alb-espacio-3); color: var(--alb-sobre-primario); }

/* --- Marco ---------------------------------------------------------------- */
.pn-marco { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.pn-columna { display: flex; flex-direction: column; min-width: 0; }

.pn-lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--alb-espacio-1);
  padding: var(--alb-espacio-5) var(--alb-espacio-3);
  background: var(--pn-lat-fondo); color: var(--pn-lat-texto);
  border-right: 1px solid var(--alb-borde);
  /* constelación tenue al pie, de la ilustración de marca */
  background-image: url("/marca/constelacion-negativo.svg");
  background-repeat: no-repeat; background-position: 50% calc(100% - 128px); background-size: 180px auto;
}
.pn-lateral__logo { display: inline-flex; margin: 0 var(--alb-espacio-2) var(--alb-espacio-5); border-radius: var(--alb-radio-s); }
.pn-lateral__logo img { height: 36px; width: auto; }
.pn-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pn-nav__enlace {
  display: flex; align-items: center; gap: var(--alb-espacio-3);
  padding: var(--alb-espacio-2) var(--alb-espacio-3); min-height: 40px;
  border-radius: var(--alb-radio-m);
  color: color-mix(in srgb, var(--pn-lat-texto) 82%, transparent);
  font-size: var(--alb-tam-s); text-decoration: none;
  transition: background-color var(--alb-transicion), color var(--alb-transicion);
}
.pn-nav__enlace:hover { background: color-mix(in srgb, var(--pn-lat-texto) 9%, transparent); color: var(--pn-lat-texto); text-decoration: none; }
.pn-nav__enlace[aria-current="page"] {
  background: color-mix(in srgb, var(--pn-lat-texto) 14%, transparent);
  color: var(--pn-lat-texto); font-weight: var(--alb-peso-medio);
  box-shadow: inset 3px 0 0 var(--alb-acento);
}
.pn-nav__enlace .pn-icono { width: 18px; height: 18px; }
.pn-lateral :focus-visible { outline-color: var(--alb-acento); }
.pn-lateral__pie { margin-top: auto; padding-top: var(--alb-espacio-5); border-top: 1px solid color-mix(in srgb, var(--pn-lat-texto) 14%, transparent); }

.pn-barra {
  position: sticky; top: 0; z-index: var(--alb-z-menu);
  display: flex; align-items: center; gap: var(--alb-espacio-4);
  padding: var(--alb-espacio-3) var(--alb-espacio-6);
  background: var(--alb-fondo);
  border-bottom: 1px solid var(--alb-borde);
}
.pn-barra__isotipo, .pn-boton-menu, .pn-velo-menu { display: none; }
.pn-barra__sitio { display: flex; align-items: center; gap: var(--alb-espacio-2); min-width: 0; }
.pn-barra__sitio[hidden] { display: none; }
.pn-barra__etiqueta { font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); white-space: nowrap; }
.pn-selector { width: auto; max-width: 280px; min-height: 36px; padding-block: var(--alb-espacio-1); font-size: var(--alb-tam-s); }
.pn-barra__sitio-nombre { display: none; }
.pn-barra__derecha { margin-left: auto; display: flex; align-items: center; gap: var(--alb-espacio-3); }
.pn-barra__usuario { font-size: var(--alb-tam-s); color: var(--alb-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.pn-preferencias { display: flex; align-items: center; gap: var(--alb-espacio-1); }
.pn-select-chico { width: auto; min-height: 36px; padding-block: var(--alb-espacio-1); font-size: var(--alb-tam-s); }
.pn-boton-icono { min-width: 36px; padding-inline: var(--alb-espacio-2); }
.pn-boton-icono svg { width: 18px; height: 18px; }

.pn-principal { flex: 1; padding: var(--alb-espacio-6); width: 100%; max-width: calc(var(--alb-ancho-max) + 2 * var(--alb-espacio-6)); }
.pn-principal:focus { outline: none; }
.pn-vista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--alb-espacio-5); align-content: start; }
.pn-vista h1[tabindex="-1"]:focus { outline: none; }

/* Cargando: cuatro fases de la luna que se llenan en orden */
.pn-cargando { display: flex; align-items: center; gap: var(--alb-espacio-3); padding: var(--alb-espacio-7) 0; justify-content: center; color: var(--alb-texto-2); }
.pn-lunas { display: inline-flex; gap: 6px; }
.pn-lunas i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--alb-primario);
  background: linear-gradient(90deg, var(--alb-primario) 50%, transparent 50%) 0 0 / 200% 100% no-repeat;
  background-position: 100% 0;
  animation: pn-fase 2.4s ease-in-out infinite;
}
.pn-lunas i:nth-child(2) { animation-delay: 0.3s; }
.pn-lunas i:nth-child(3) { animation-delay: 0.6s; }
.pn-lunas i:nth-child(4) { animation-delay: 0.9s; }
.pn-lunas--grande i { width: 18px; height: 18px; border-color: var(--alb-acento); background-image: linear-gradient(90deg, var(--alb-acento) 50%, transparent 50%); }
@keyframes pn-fase { 0%, 15% { background-position: 100% 0; } 50%, 65% { background-position: 0 0; } 100% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .pn-lunas i, .pn-arranque img, .pn-pulso { animation: none !important; }
  .pn-lunas i:nth-child(-n+2) { background-position: 0 0; }
}

/* Encabezado de vista */
.pn-encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--alb-espacio-4); }
.pn-encabezado h1 { margin: 0; font-size: var(--alb-tam-2xl); }
.pn-encabezado__sub { margin: var(--alb-espacio-1) 0 0; font-size: var(--alb-tam-s); max-width: 70ch; }
.pn-encabezado__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-3); }
.pn-migas { margin: 0 0 calc(-1 * var(--alb-espacio-3)); font-size: var(--alb-tam-s); }
.pn-rango { display: flex; align-items: center; gap: var(--alb-espacio-2); }
.pn-rango__etiqueta { font-size: var(--alb-tam-s); color: var(--alb-texto-2); }

.pn-seccion { display: grid; gap: var(--alb-espacio-4); align-content: start; }
.pn-seccion__titulo { margin: 0; font-size: var(--alb-tam-l); }
.pn-subtitulo { margin: 0; font-size: var(--alb-tam-m); }
.pn-seccion > .alb-boton { justify-self: start; }
.pn-acciones { display: flex; flex-wrap: wrap; gap: var(--alb-espacio-2); align-items: center; }
.pn-acciones--centro { justify-content: center; }
.pn-barra-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--alb-espacio-3); }
.pn-barra-seccion p { margin: 0; }

.alb-vacio { background: var(--alb-superficie); }
.alb-vacio > img { width: 120px; }
.alb-vacio > .pn-vacio__ilus--fases-lunares { width: 240px; }
.alb-vacio > .pn-vacio__ilus--constelacion { width: 180px; }
.pn-vacio__texto { margin: 0; max-width: 46ch; }
.pn-vacio--compacto { padding: var(--alb-espacio-6) var(--alb-espacio-5); }
.pn-vacio--compacto > img { width: 88px; }
.pn-aviso__cuerpo { display: grid; gap: var(--alb-espacio-2); justify-items: start; }
.pn-aviso__cuerpo p { margin: 0; }
.pn-aviso__texto { color: var(--alb-texto); }

.pn-pulso {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--alb-exito); box-shadow: 0 0 0 3px var(--alb-exito-fondo);
  animation: pn-latido 2s ease-in-out infinite;
}
@keyframes pn-latido { 50% { box-shadow: 0 0 0 6px var(--alb-exito-fondo); } }
.pn-insignia-enlace { text-decoration: none; padding: var(--alb-espacio-1) var(--alb-espacio-3); font-size: var(--alb-tam-s); }
.pn-insignia-enlace:hover { text-decoration: underline; color: var(--alb-exito); }

/* --- KPIs y gráficas ------------------------------------------------------- */
.pn-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--alb-espacio-4); }
.pn-kpis--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-kpi { padding: var(--alb-espacio-4) var(--alb-espacio-5); display: grid; gap: var(--alb-espacio-1); align-content: start; }
.pn-kpi .alb-tarjeta__titulo { margin: 0; }
.pn-kpi__cifra { margin: 0; font-size: var(--alb-tam-2xl); overflow-wrap: anywhere; }
.pn-kpi__nota { margin: 0; font-size: var(--alb-tam-xs); }
.pn-kpi__paso { margin: 0; font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-xl); }
.pn-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--alb-espacio-4); }
.pn-dos--detalle { grid-template-columns: 1fr 1fr; }

.pn-tarjeta-grafica { padding: var(--alb-espacio-4) var(--alb-espacio-5); min-width: 0; }
.pn-grafica { margin: 0; display: grid; gap: var(--alb-espacio-2); }
.pn-grafica__titulo .alb-tarjeta__titulo { display: block; margin: 0; }
.pn-grafica__leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--alb-espacio-4); font-size: var(--alb-tam-xs); color: var(--alb-texto-2); }
.pn-leyenda { display: inline-flex; align-items: center; gap: 6px; }
.pn-leyenda::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--alb-serie-1); flex: none; }
.pn-leyenda--2::before { background: var(--alb-serie-2); }
.pn-leyenda--3::before { background: var(--alb-serie-3); }
.pn-grafica__figura { position: relative; border-radius: var(--alb-radio-m); outline-offset: 4px; touch-action: pan-y; }
.pn-grafica__lienzo { width: 100%; min-height: 120px; }
.pn-grafica__svg { display: block; max-width: none; }
.pn-gr-rejilla { stroke: var(--alb-grafica-rejilla); stroke-width: 1; }
.pn-gr-eje { stroke: var(--alb-grafica-eje); stroke-width: 1; }
.pn-gr-texto { fill: var(--alb-texto-tenue); font-size: 11px; font-family: var(--alb-fuente-texto); font-variant-numeric: tabular-nums; }
.pn-gr-etiqueta { fill: var(--alb-texto); font-size: 12px; font-weight: var(--alb-peso-fuerte); font-family: var(--alb-fuente-texto); }
.pn-gr-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pn-gr-trazo-1 { stroke: var(--alb-serie-1); }
.pn-gr-trazo-2 { stroke: var(--alb-serie-2); }
.pn-gr-trazo-3 { stroke: var(--alb-serie-3); }
.pn-gr-relleno-1 { fill: var(--alb-serie-1); }
.pn-gr-relleno-2 { fill: var(--alb-serie-2); }
.pn-gr-relleno-3 { fill: var(--alb-serie-3); }
.pn-gr-punto { stroke: var(--alb-grafica-superficie); stroke-width: 2; }
.pn-gr-barra { transition: opacity var(--alb-transicion); }
.pn-grafica__figura:hover .pn-gr-barra:not(.pn-gr-barra--activa) { opacity: 0.55; }
.pn-gr-cruz { stroke: var(--alb-borde-fuerte); stroke-width: 1; stroke-dasharray: 3 3; }
.pn-grafica__tooltip {
  position: absolute; z-index: 2; pointer-events: none; min-width: 150px;
  padding: var(--alb-espacio-2) var(--alb-espacio-3);
  background: var(--alb-superficie); color: var(--alb-texto);
  border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); box-shadow: var(--alb-sombra-2);
  font-size: var(--alb-tam-xs);
}
.pn-grafica__tooltip-dia { margin: 0 0 var(--alb-espacio-1); color: var(--alb-texto-2); }
.pn-grafica__tooltip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pn-grafica__tooltip li { display: flex; justify-content: space-between; gap: var(--alb-espacio-3); }
.pn-grafica__tabla summary { cursor: pointer; font-size: var(--alb-tam-xs); color: var(--alb-primario); width: max-content; border-radius: var(--alb-radio-s); }
.pn-grafica__tabla[open] summary { margin-bottom: var(--alb-espacio-2); }
.pn-grafica__tabla .pn-tabla-scroll { max-height: 280px; overflow: auto; }

/* Embudo */
.pn-embudo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--alb-espacio-4); }
.pn-embudo__cabeza { display: flex; justify-content: space-between; gap: var(--alb-espacio-3); font-size: var(--alb-tam-s); margin-bottom: var(--alb-espacio-1); }
.pn-embudo__nombre { font-weight: var(--alb-peso-medio); }
.pn-embudo__pista { height: 20px; background: var(--alb-superficie-2); border-radius: var(--alb-radio-s); overflow: hidden; }
.pn-embudo__barra { display: block; height: 100%; border-radius: var(--alb-radio-s); }
.pn-embudo__barra--2 { background: var(--alb-secuencial-2); }
.pn-embudo__barra--3 { background: var(--alb-secuencial-3); }
.pn-embudo__barra--4 { background: var(--alb-secuencial-4); }
.pn-embudo__barra--5 { background: var(--alb-secuencial-5); }
.pn-embudo__barra--6 { background: var(--alb-secuencial-6); }
.pn-embudo__paso-anterior { margin: var(--alb-espacio-1) 0 0; font-size: var(--alb-tam-xs); }

/* Fuentes */
.pn-destacado { margin: 0; padding: var(--alb-espacio-3) var(--alb-espacio-4); border-radius: var(--alb-radio-m); background: var(--alb-primario-suave); color: var(--alb-texto); font-size: var(--alb-tam-s); }
.pn-barra-mini { display: inline-block; vertical-align: middle; width: 56px; height: 6px; margin-right: var(--alb-espacio-2); background: var(--alb-superficie-2); border-radius: var(--alb-radio-pleno); overflow: hidden; }
.pn-barra-mini__relleno { display: block; height: 100%; background: var(--alb-serie-1); border-radius: inherit; }
.pn-fuente { font-weight: var(--alb-peso-medio); overflow-wrap: anywhere; }

/* --- Tablas y filtros ------------------------------------------------------ */
.pn-tabla-scroll { overflow-x: auto; }
.pn-tarjeta-tabla { padding: 0; overflow: hidden; overflow-x: auto; }
.pn-tabla { min-width: 640px; }
.pn-tabla th, .pn-tabla td { vertical-align: middle; }
.pn-tabla thead th { white-space: nowrap; }
.pn-tabla tbody th { font-weight: var(--alb-peso-normal); text-align: left; background: transparent; color: var(--alb-texto); }
.pn-tabla tr:last-child td, .pn-tabla tr:last-child th { border-bottom: 0; }
.pn-celda-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); }
.pn-celda-nombre a { font-weight: var(--alb-peso-medio); overflow-wrap: anywhere; }
.pn-celda-correo { overflow-wrap: anywhere; max-width: 260px; }
.pn-conteo { margin: 0; font-size: var(--alb-tam-s); }
.pn-resultados { display: grid; gap: var(--alb-espacio-3); }

.pn-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-3) var(--alb-espacio-5); }
.pn-filtros__busqueda { position: relative; flex: 1 1 280px; max-width: 460px; }
.pn-filtros__busqueda .alb-entrada { padding-left: 40px; }
.pn-filtros__lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--alb-texto-tenue); pointer-events: none; }
.pn-filtros__orden { display: flex; align-items: center; gap: var(--alb-espacio-2); font-size: var(--alb-tam-s); color: var(--alb-texto-2); }
.pn-check { display: inline-flex; align-items: center; gap: var(--alb-espacio-2); font-size: var(--alb-tam-s); cursor: pointer; min-height: 32px; }
.pn-check input { width: 18px; height: 18px; accent-color: var(--alb-primario); margin: 0; }
.pn-check .pn-icono { width: 16px; height: 16px; color: var(--alb-texto-2); }

.pn-paginacion { display: flex; align-items: center; justify-content: center; gap: var(--alb-espacio-3); }
.pn-paginacion__estado { font-size: var(--alb-tam-s); }

/* --- En vivo --------------------------------------------------------------- */
.pn-vivo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--alb-espacio-4); }
.pn-vivo__tarjeta { padding: var(--alb-espacio-4); display: grid; gap: var(--alb-espacio-3); align-content: start; }
.pn-vivo__tarjeta--alta { border-color: var(--alb-acento); box-shadow: var(--alb-sombra-halo); }
.pn-vivo__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); }
.pn-vivo__nombre { font-weight: var(--alb-peso-fuerte); color: var(--alb-texto); overflow-wrap: anywhere; }
.pn-vivo__pagina { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 var(--alb-espacio-2); font-size: var(--alb-tam-s); }
.pn-vivo__pagina .pn-icono { width: 16px; height: 16px; color: var(--alb-texto-tenue); margin-top: 3px; grid-row: span 2; }
.pn-vivo__titulo { overflow-wrap: anywhere; }
.pn-vivo__ruta { font-family: var(--alb-fuente-mono); font-size: var(--alb-tam-xs); overflow-wrap: anywhere; }
.pn-vivo__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--alb-espacio-2); }
.pn-vivo__meta { margin: 0; font-size: var(--alb-tam-xs); }
.pn-vivo__puntaje { display: inline-flex; align-items: center; gap: var(--alb-espacio-2); }
.pn-vivo__puntaje-etq { font-size: var(--alb-tam-xs); }
.pn-vivo__estado { display: grid; gap: var(--alb-espacio-2); margin-top: calc(-1 * var(--alb-espacio-3)); }
.pn-vivo__error:empty { display: none; }
.pn-vivo__actualizado { margin: 0; font-size: var(--alb-tam-xs); }
.pn-vivo__contador { padding: var(--alb-espacio-1) var(--alb-espacio-3); font-size: var(--alb-tam-s); }

/* --- Detalle y línea de tiempo --------------------------------------------- */
.pn-datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--alb-espacio-2) var(--alb-espacio-4); margin: 0; font-size: var(--alb-tam-s); }
.pn-datos dt { color: var(--alb-texto-tenue); }
.pn-datos dd { margin: 0; overflow-wrap: anywhere; }
.pn-lista-simple { margin: 0; padding-left: var(--alb-espacio-5); display: grid; gap: var(--alb-espacio-2); font-size: var(--alb-tam-s); }
.pn-privacidad-acciones { display: grid; gap: var(--alb-espacio-2); margin-top: var(--alb-espacio-5); padding-top: var(--alb-espacio-4); border-top: 1px solid var(--alb-borde); }
.pn-privacidad-acciones p { margin: 0; }
.pn-nota-privacidad { background: var(--alb-superficie-2); }

.pn-tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--alb-espacio-5); }
.pn-tiempo__grupo { background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l); padding: var(--alb-espacio-4) var(--alb-espacio-5); }
.pn-tiempo__visita { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--alb-espacio-2) var(--alb-espacio-4); padding-bottom: var(--alb-espacio-3); margin-bottom: var(--alb-espacio-3); border-bottom: 1px solid var(--alb-borde); }
.pn-tiempo__fecha { margin: 0; font-size: var(--alb-tam-m); }
.pn-tiempo__datos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); }
.pn-tiempo__eventos { list-style: none; margin: 0; padding: 0; position: relative; }
.pn-tiempo__eventos::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; border-left: 1px dashed var(--alb-borde-fuerte); }
.pn-tiempo__evento { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--alb-espacio-3); padding: var(--alb-espacio-2) 0; }
.pn-tiempo__punto {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--alb-superficie-2); color: var(--alb-texto-2);
  border: 1px solid var(--alb-borde);
}
.pn-tiempo__punto .pn-icono { width: 14px; height: 14px; }
.pn-tiempo__evento--carrito .pn-tiempo__punto { background: var(--alb-primario-suave); color: var(--alb-primario); }
.pn-tiempo__evento--compra .pn-tiempo__punto { background: var(--alb-acento); color: var(--alb-sobre-acento); border-color: var(--alb-acento); }
.pn-tiempo__evento--perfil .pn-tiempo__punto { background: var(--alb-info-fondo); color: var(--alb-info); }
.pn-tiempo__cuerpo { min-width: 0; }
.pn-tiempo__cuerpo p { margin: 0; }
.pn-tiempo__linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); font-size: var(--alb-tam-s); }
.pn-tiempo__hora { margin-left: auto; font-size: var(--alb-tam-xs); font-variant-numeric: tabular-nums; }
.pn-tiempo__pagina { font-size: var(--alb-tam-s); overflow-wrap: anywhere; }
.pn-tiempo__url { font-family: var(--alb-fuente-mono); font-size: var(--alb-tam-xs); }
.pn-tiempo__detalle { font-size: var(--alb-tam-xs); color: var(--alb-texto-2); overflow-wrap: anywhere; }

/* --- Alertas --------------------------------------------------------------- */
.pn-pestanas { display: flex; gap: var(--alb-espacio-1); border-bottom: 1px solid var(--alb-borde); overflow-x: auto; }
.pn-pestana {
  font: inherit; font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio);
  padding: var(--alb-espacio-3) var(--alb-espacio-4); min-height: 44px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--alb-texto-2); cursor: pointer; border-radius: var(--alb-radio-s) var(--alb-radio-s) 0 0;
}
.pn-pestana:hover { color: var(--alb-texto); background: var(--alb-superficie-2); }
.pn-pestana[aria-selected="true"] { color: var(--alb-primario); border-bottom-color: var(--alb-acento); }
.pn-pestana-panel { display: grid; gap: var(--alb-espacio-4); }
.pn-pestana-panel:focus-visible { outline-offset: 6px; border-radius: var(--alb-radio-s); }

.pn-reglas, .pn-canales, .pn-historial { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--alb-espacio-3); }
.pn-regla { padding: var(--alb-espacio-4) var(--alb-espacio-5); display: grid; gap: var(--alb-espacio-2); }
.pn-regla--apagada { background: var(--alb-superficie-2); }
.pn-regla__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--alb-espacio-3); }
.pn-regla__titulos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); }
.pn-regla__nombre { margin: 0; font-size: var(--alb-tam-l); overflow-wrap: anywhere; }
.pn-regla__desc, .pn-regla__canales { margin: 0; font-size: var(--alb-tam-s); }
.pn-regla__canales { display: flex; align-items: center; gap: var(--alb-espacio-2); font-size: var(--alb-tam-xs); }
.pn-regla__canales .pn-icono { width: 14px; height: 14px; }
.pn-regla__interruptor { display: flex; align-items: center; gap: var(--alb-espacio-2); }
.pn-interruptor__texto { font-size: var(--alb-tam-xs); }

.pn-interruptor {
  position: relative; width: 44px; height: 26px; flex: none; padding: 0; cursor: pointer;
  border-radius: var(--alb-radio-pleno); border: 1px solid var(--alb-borde-fuerte); background: var(--alb-superficie-2);
  transition: background-color var(--alb-transicion);
}
.pn-interruptor__bola {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--alb-superficie); box-shadow: var(--alb-sombra-1); border: 1px solid var(--alb-borde-fuerte);
  transition: transform var(--alb-transicion);
}
.pn-interruptor[aria-checked="true"] { background: var(--alb-primario); border-color: var(--alb-primario); }
.pn-interruptor[aria-checked="true"] .pn-interruptor__bola { transform: translateX(18px); border-color: var(--alb-primario); }
.pn-interruptor:disabled { opacity: 0.6; cursor: not-allowed; }

.pn-canal { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--alb-espacio-3) var(--alb-espacio-4); padding: var(--alb-espacio-4); }
.pn-canal__icono { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--alb-primario-suave); color: var(--alb-primario); }
.pn-canal__texto p { margin: 0; }
.pn-canal__nombre { font-weight: var(--alb-peso-medio); overflow-wrap: anywhere; }
.pn-canal__destino { font-size: var(--alb-tam-xs); overflow-wrap: anywhere; }

.pn-alerta { padding: var(--alb-espacio-4); display: grid; gap: var(--alb-espacio-2); }
.pn-alerta p { margin: 0; }
.pn-alerta__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--alb-espacio-3); }
.pn-alerta__titulo { font-weight: var(--alb-peso-fuerte); overflow-wrap: anywhere; }
.pn-alerta__cuerpo { font-size: var(--alb-tam-s); white-space: pre-line; overflow-wrap: anywhere; }
.pn-alerta__meta { font-size: var(--alb-tam-xs); }
.pn-alerta__error { color: var(--alb-peligro); }
.pn-alerta__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--alb-espacio-2) var(--alb-espacio-4); }
.pn-alerta__pie > .pn-alerta__meta { min-width: 0; flex: 1 1 240px; }
.pn-alerta__enlace { flex: none; }

.pn-pasos { margin: 0 0 var(--alb-espacio-4); padding-left: var(--alb-espacio-5); display: grid; gap: var(--alb-espacio-3); }
.pn-pasos a { margin-left: var(--alb-espacio-2); }
.pn-codigo-caja { margin-top: var(--alb-espacio-2); }
.pn-codigo-grande { display: inline-block; padding: var(--alb-espacio-2) var(--alb-espacio-3); font-size: var(--alb-tam-l); background: var(--alb-superficie-2); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); user-select: all; overflow-wrap: anywhere; }
.pn-espera { display: flex; align-items: center; gap: var(--alb-espacio-3); margin: 0; color: var(--alb-texto-2); }

/* --- Formularios ----------------------------------------------------------- */
.pn-form { display: grid; gap: 0; }
.pn-form--dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--alb-espacio-5); }
.pn-form--dos > [aria-live], .pn-form__pie { grid-column: 1 / -1; }
.pn-form--dos .alb-campo { align-content: start; }
.pn-form__pie { display: flex; justify-content: flex-start; }
.pn-fieldset { border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); padding: var(--alb-espacio-3) var(--alb-espacio-4); margin: 0 0 var(--alb-espacio-4); display: grid; gap: var(--alb-espacio-1); }
.pn-fieldset legend { font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio); padding: 0 var(--alb-espacio-1); }
.pn-params { display: grid; }
.pn-params > .pn-check { margin-bottom: var(--alb-espacio-4); }
.pn-regla-desc { margin: calc(-1 * var(--alb-espacio-3)) 0 var(--alb-espacio-4); }
.pn-opcion { display: grid; grid-template-columns: auto 1fr; gap: var(--alb-espacio-3); align-items: start; padding: var(--alb-espacio-3); border-radius: var(--alb-radio-m); cursor: pointer; }
.pn-opcion:hover { background: var(--alb-superficie-2); }
.pn-opcion input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--alb-primario); }
.pn-opcion__texto { display: grid; gap: 2px; font-size: var(--alb-tam-s); }
.pn-ajuste--peligro { border-color: var(--alb-peligro); }
.pn-ajuste--peligro .pn-seccion__titulo { color: var(--alb-peligro); }
.pn-ajuste .alb-texto-2 { margin: 0; }
.pn-arco { display: grid; gap: var(--alb-espacio-2); margin-top: var(--alb-espacio-3); }
.pn-lista-arco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--alb-espacio-2); }
.pn-arco__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--alb-espacio-2); padding: var(--alb-espacio-3); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); font-size: var(--alb-tam-s); }
.pn-confirmar-campo { margin-top: var(--alb-espacio-3); }

/* --- Modal ----------------------------------------------------------------- */
.pn-modal {
  width: min(560px, calc(100vw - 2 * var(--alb-espacio-4))); max-height: calc(100vh - 2 * var(--alb-espacio-5));
  padding: 0; border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l);
  background: var(--alb-superficie); color: var(--alb-texto); box-shadow: var(--alb-sombra-3);
}
.pn-modal--ancho { width: min(680px, calc(100vw - 2 * var(--alb-espacio-4))); }
.pn-modal[open] { display: flex; flex-direction: column; }
.pn-modal::backdrop { background: var(--alb-velo); }
.pn-modal__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--alb-espacio-3); padding: var(--alb-espacio-4) var(--alb-espacio-5); border-bottom: 1px solid var(--alb-borde); }
.pn-modal__titulo { margin: 0; font-size: var(--alb-tam-xl); }
.pn-modal__cuerpo { padding: var(--alb-espacio-5); overflow-y: auto; }
.pn-modal__cuerpo > p:last-child { margin-bottom: 0; }
.pn-modal__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--alb-espacio-2); padding: var(--alb-espacio-4) var(--alb-espacio-5); border-top: 1px solid var(--alb-borde); background: var(--alb-superficie-2); border-radius: 0 0 var(--alb-radio-l) var(--alb-radio-l); }
.pn-secreto__caja { padding: var(--alb-espacio-3); margin-bottom: var(--alb-espacio-3); background: var(--alb-superficie-2); border: 1px dashed var(--alb-acento-texto); border-radius: var(--alb-radio-m); }
.pn-secreto { display: block; font-size: var(--alb-tam-s); overflow-wrap: anywhere; user-select: all; }

/* Avisos flotantes */
.pn-avisos { position: fixed; right: var(--alb-espacio-5); bottom: var(--alb-espacio-5); z-index: var(--alb-z-aviso); display: grid; gap: var(--alb-espacio-2); max-width: min(420px, calc(100vw - 2 * var(--alb-espacio-5))); }
.pn-aviso-flotante {
  display: flex; align-items: flex-start; gap: var(--alb-espacio-2);
  padding: var(--alb-espacio-3) var(--alb-espacio-4);
  background: var(--alb-superficie); color: var(--alb-texto);
  border: 1px solid var(--alb-borde); border-left: 3px solid var(--alb-exito); border-radius: var(--alb-radio-m);
  box-shadow: var(--alb-sombra-3); font-size: var(--alb-tam-s);
  animation: pn-entrar 200ms ease-out;
  transition: opacity 300ms, transform 300ms;
}
.pn-aviso-flotante .pn-icono { width: 18px; height: 18px; color: var(--alb-exito); }
.pn-aviso-flotante--peligro { border-left-color: var(--alb-peligro); }
.pn-aviso-flotante--peligro .pn-icono { color: var(--alb-peligro); }
.pn-aviso-flotante--alerta { border-left-color: var(--alb-alerta); }
.pn-aviso-flotante--alerta .pn-icono { color: var(--alb-alerta); }
.pn-saliendo { opacity: 0; transform: translateY(6px); }
@keyframes pn-entrar { from { opacity: 0; transform: translateY(8px); } }

/* --- Sitios ---------------------------------------------------------------- */
.pn-rejilla-sitios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--alb-espacio-4); }
.pn-sitio-tarjeta { display: grid; gap: var(--alb-espacio-1); color: var(--alb-texto); text-decoration: none; height: 100%; transition: box-shadow var(--alb-transicion), border-color var(--alb-transicion); }
.pn-sitio-tarjeta:hover { color: var(--alb-texto); text-decoration: none; box-shadow: var(--alb-sombra-2); border-color: var(--alb-primario); }
.pn-sitio-tarjeta .pn-icono { color: var(--alb-primario); margin-bottom: var(--alb-espacio-2); }
.pn-sitio-tarjeta__nombre { font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-l); font-weight: var(--alb-peso-fuerte); }
.pn-sitio-tarjeta__clave { font-family: var(--alb-fuente-mono); font-size: var(--alb-tam-xs); }
.pn-sitio-tarjeta__dominios { font-size: var(--alb-tam-xs); overflow-wrap: anywhere; }

/* --- Instalación ----------------------------------------------------------- */
.pn-verificacion {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--alb-espacio-4);
  padding: var(--alb-espacio-4) var(--alb-espacio-5); border-radius: var(--alb-radio-l);
  background: var(--alb-superficie); border: 1px dashed var(--alb-acento-texto);
}
.pn-verificacion p { margin: 0; }
.pn-verificacion > div { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.pn-verificacion__titulo { font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-l); font-weight: var(--alb-peso-fuerte); }
.pn-verificacion--lista { border-style: solid; border-color: var(--alb-exito); background: var(--alb-exito-fondo); }
.pn-verificacion__icono { color: var(--alb-exito); }
.pn-pasos-instalacion { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--alb-espacio-4); }
.pn-paso { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--alb-espacio-4); padding: var(--alb-espacio-5); background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l); box-shadow: var(--alb-sombra-1); }
.pn-paso__cuerpo { display: grid; gap: var(--alb-espacio-3); min-width: 0; }
.pn-paso__cuerpo > p { margin: 0; }
.pn-paso__cuerpo > .alb-boton { justify-self: start; }
.pn-paso__titulo { margin: 0; font-size: var(--alb-tam-xl); }
/* Cada paso «llena» la luna: creciente → cuarto → gibosa → llena */
.pn-paso__luna { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--alb-acento-texto); background: var(--alb-superficie-2); }
.pn-paso__luna--1 { background: linear-gradient(90deg, var(--alb-superficie-2) 72%, var(--alb-acento) 72%); }
.pn-paso__luna--2 { background: linear-gradient(90deg, var(--alb-superficie-2) 50%, var(--alb-acento) 50%); }
.pn-paso__luna--3 { background: linear-gradient(90deg, var(--alb-superficie-2) 24%, var(--alb-acento) 24%); }
.pn-paso__luna--4 { background: var(--alb-acento); }
.pn-codigo { min-width: 0; border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); overflow: hidden; background: var(--alb-superficie-2); }
.pn-codigo__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--alb-espacio-2); padding: var(--alb-espacio-2) var(--alb-espacio-3); border-bottom: 1px solid var(--alb-borde); }
.pn-codigo__barra > * { min-width: 0; }
.pn-codigo__etiqueta { font-size: var(--alb-tam-xs); }
.pn-codigo pre { margin: 0; border: 0; border-radius: 0; max-width: 100%; overflow-x: auto; font-size: var(--alb-tam-s); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pn-detalles { border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); padding: var(--alb-espacio-3) var(--alb-espacio-4); display: grid; gap: var(--alb-espacio-3); }
.pn-detalles[open] { gap: var(--alb-espacio-3); }
.pn-detalles summary { cursor: pointer; font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio); color: var(--alb-primario); border-radius: var(--alb-radio-s); }
.pn-detalles > p { margin: 0; }

/* --- Entrar / registro ----------------------------------------------------- */
.pn-acceso-principal { min-height: 100vh; display: grid; place-items: center; padding: var(--alb-espacio-5); background: var(--alb-superficie-inversa); position: relative; overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .pn-acceso-principal { background: var(--alb-fondo); } }
:root[data-tema="oscuro"] .pn-acceso-principal { background: var(--alb-fondo); }
.pn-acceso-principal:focus { outline: none; }
.pn-acceso { position: relative; width: 100%; display: grid; place-items: center; }
.pn-acceso__cielo { position: absolute; inset: -40px; display: grid; place-items: center; pointer-events: none; opacity: 0.55; }
.pn-acceso__cielo img { width: min(1100px, 160vw); max-width: none; }
.pn-acceso__tarjeta { position: relative; width: min(440px, 100%); padding: var(--alb-espacio-6); display: grid; gap: var(--alb-espacio-3); }
.pn-acceso__logo { justify-self: center; height: 84px; width: auto; }
.pn-acceso__titulo { margin: var(--alb-espacio-2) 0 0; text-align: center; font-size: var(--alb-tam-2xl); }
.pn-acceso__lema { margin: 0; text-align: center; }
.pn-acceso__form { display: grid; }
.pn-acceso__cambio, .pn-acceso__legal { margin: 0; text-align: center; font-size: var(--alb-tam-s); }
.pn-acceso__legal { font-size: var(--alb-tam-xs); }
.pn-acceso__olvido { margin: 0; text-align: center; font-size: var(--alb-tam-xs); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .pn-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pn-marco { grid-template-columns: minmax(0, 1fr); }
  .pn-lateral {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: var(--alb-z-modal);
    transform: translateX(-105%); transition: transform var(--alb-transicion); visibility: hidden;
    box-shadow: var(--alb-sombra-3);
  }
  .pn-lateral--abierto { transform: none; visibility: visible; }
  .pn-velo-menu { display: block; position: fixed; inset: 0; z-index: calc(var(--alb-z-modal) - 1); background: var(--alb-velo); }
  .pn-velo-menu[hidden] { display: none; }
  .pn-barra { padding: var(--alb-espacio-2) var(--alb-espacio-4); gap: var(--alb-espacio-2); flex-wrap: wrap; }
  .pn-barra__isotipo { display: inline-flex; }
  .pn-barra__isotipo img { width: 32px; height: 32px; }
  .pn-boton-menu { display: inline-flex; }
  .pn-barra__usuario { display: none; }
  .pn-principal { padding: var(--alb-espacio-5) var(--alb-espacio-4); }
  .pn-dos, .pn-dos--detalle { grid-template-columns: minmax(0, 1fr); }
  .pn-form--dos { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pn-barra__sitio { order: 5; flex: 1 1 100%; }
  .pn-barra__etiqueta { display: none; }
  .pn-selector { max-width: none; width: 100%; }
  .pn-barra .pn-select-chico { max-width: 6.5rem; }
  .pn-barra__derecha { gap: var(--alb-espacio-1); }
  .pn-kpis, .pn-kpis--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--alb-espacio-3); }
  .pn-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pn-kpi { padding: var(--alb-espacio-3) var(--alb-espacio-4); }
  .pn-kpi__cifra { font-size: var(--alb-tam-xl); }
  .pn-encabezado h1 { font-size: var(--alb-tam-xl); }
  .pn-vivo { grid-template-columns: 1fr; }
  .pn-canal { grid-template-columns: auto 1fr; }
  .pn-canal > .alb-insignia { justify-self: start; }
  .pn-canal > .pn-acciones { grid-column: 1 / -1; }
  .pn-paso { grid-template-columns: minmax(0, 1fr); padding: var(--alb-espacio-4); }
  .pn-tiempo__grupo { padding: var(--alb-espacio-3) var(--alb-espacio-4); }
  .pn-acceso__tarjeta { padding: var(--alb-espacio-5); }
  .pn-avisos { left: var(--alb-espacio-4); right: var(--alb-espacio-4); bottom: var(--alb-espacio-4); max-width: none; }
  .pn-regla__cabeza { flex-direction: column; }
  .pn-celda-correo { max-width: 180px; }
  /* Objetivos táctiles de 44 px: se agranda el área sin cambiar el dibujo. */
  .pn-check { min-height: 44px; }
  .pn-check input { width: 22px; height: 22px; }
  .pn-grafica__tabla summary, .pn-detalles summary { padding-block: var(--alb-espacio-3); font-size: var(--alb-tam-s); }
  .pn-interruptor::after, .pn-insignia-enlace::after, .pn-celda-nombre a::after { content: ""; position: absolute; inset: -10px -4px; }
  .pn-insignia-enlace, .pn-celda-nombre a { position: relative; }
}

@media (forced-colors: active) {
  .pn-nav__enlace[aria-current="page"] { outline: 2px solid CanvasText; }
  .pn-interruptor[aria-checked="true"] .pn-interruptor__bola { background: Highlight; }
}

/* --- Banda de cobro (pago pendiente, gracia, límite de visitas) ------------- */
.pn-banda-cobro:empty { display: none; }
.pn-banda-cobro { padding: var(--alb-espacio-3) var(--alb-espacio-6) 0; }
.pn-banda-cobro .alb-aviso { margin: 0; align-items: center; }
.pn-banda-cobro .pn-aviso__cuerpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-3); justify-content: space-between; }

/* --- Planes (registro y Plan y pagos) --------------------------------------- */
.pn-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--alb-espacio-4); }
.pn-plan {
  position: relative; display: flex; flex-direction: column; gap: var(--alb-espacio-2);
  padding: var(--alb-espacio-5); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l);
  background: var(--alb-superficie); transition: border-color var(--alb-transicion), box-shadow var(--alb-transicion);
}
.pn-plan__cuerpo { display: flex; flex-direction: column; gap: var(--alb-espacio-2); flex: 1; }
.pn-plan--radio { cursor: pointer; }
.pn-plan--radio:hover { border-color: var(--alb-borde-fuerte); }
.pn-plan--elegido { border-color: var(--alb-primario); box-shadow: 0 0 0 2px var(--alb-primario-suave), var(--alb-sombra-1); }
.pn-plan__radio { position: absolute; top: var(--alb-espacio-4); right: var(--alb-espacio-4); width: 20px; height: 20px; accent-color: var(--alb-primario); margin: 0; }
.pn-plan:has(.pn-plan__radio:focus-visible) { outline: 2px solid var(--alb-foco); outline-offset: 2px; }
.pn-plan__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); padding-right: var(--alb-espacio-6); }
.pn-plan__nombre { margin: 0; font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-xl); }
.pn-plan__para { margin: 0; font-size: var(--alb-tam-s); }
.pn-plan__precio { margin: var(--alb-espacio-2) 0 0; font-size: var(--alb-tam-l); color: var(--alb-texto); }
.pn-plan__nota { margin: 0; font-size: var(--alb-tam-xs); }
.pn-plan__lista { list-style: none; margin: var(--alb-espacio-2) 0 0; padding: 0; display: grid; gap: var(--alb-espacio-1); font-size: var(--alb-tam-s); }
.pn-plan__lista li { display: flex; gap: var(--alb-espacio-2); align-items: flex-start; }
.pn-plan__lista .pn-icono { width: 16px; height: 16px; color: var(--alb-exito); margin-top: 3px; }
.pn-plan__lista--chica { font-size: var(--alb-tam-xs); }
.pn-plan__lista--prox li { color: var(--alb-texto-2); align-items: center; }
.pn-plan__prox-titulo { margin: var(--alb-espacio-3) 0 0; font-size: var(--alb-tam-xs); font-weight: var(--alb-peso-medio); color: var(--alb-texto-2); }
.pn-plan__detalles summary { cursor: pointer; font-size: var(--alb-tam-s); color: var(--alb-primario); padding-block: var(--alb-espacio-2); }
.pn-plan__acciones { display: grid; gap: var(--alb-espacio-2); margin-top: auto; padding-top: var(--alb-espacio-3); }
.pn-registro-planes { border: 0; padding: 0; margin: var(--alb-espacio-4) 0; min-width: 0; }
.pn-registro-planes legend { padding: 0; margin-bottom: var(--alb-espacio-2); }
.pn-registro-planes__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--alb-espacio-3); margin-bottom: var(--alb-espacio-3); }
.pn-registro-planes__barra p { margin: 0; max-width: 46ch; }
.pn-planes__nota, .pn-registro-nota { margin: var(--alb-espacio-3) 0; font-size: var(--alb-tam-s); }
.pn-acceso__tarjeta--ancha { width: min(1120px, 100%); }
.pn-registro-datos { margin-top: var(--alb-espacio-2); }

/* --- Plan y pagos ----------------------------------------------------------- */
.pn-cobro-estado__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--alb-espacio-3); flex-wrap: wrap; margin-bottom: var(--alb-espacio-3); }
.pn-cobro-estado .pn-plan__lista { margin-top: var(--alb-espacio-3); }
.pn-medidor { margin: var(--alb-espacio-2) 0 var(--alb-espacio-3); }
.pn-medidor__barra { display: block; height: 10px; border-radius: var(--alb-radio-pleno); background: var(--alb-superficie-2); overflow: hidden; }
.pn-medidor__barra > span { display: block; height: 100%; background: var(--alb-primario); border-radius: inherit; }
.pn-medidor--alto .pn-medidor__barra > span { background: var(--alb-alerta); }
.pn-medidor--lleno .pn-medidor__barra > span { background: var(--alb-peligro); }
.pn-spei { margin-block: var(--alb-espacio-5); display: grid; gap: var(--alb-espacio-3); border-color: var(--alb-acento); }
.pn-datos--spei { font-size: var(--alb-tam-m); }
.pn-dato-copiable { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); }
.pn-mono { font-family: var(--alb-fuente-mono); letter-spacing: 0.02em; }
.pn-spei__form { max-width: 460px; }
.pn-pago-motivo { display: block; font-size: var(--alb-tam-xs); margin-top: var(--alb-espacio-1); }
.pn-seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--alb-espacio-3); margin-bottom: var(--alb-espacio-4); }
.pn-seccion__cabeza p { margin: 0; }

/* --- Panel de la plataforma --------------------------------------------------- */
.pn-plataforma { min-height: 100vh; display: flex; flex-direction: column; }
.pn-plataforma__barra {
  display: flex; align-items: center; gap: var(--alb-espacio-4); flex-wrap: wrap;
  padding: var(--alb-espacio-3) var(--alb-espacio-6); background: var(--alb-superficie-inversa); color: var(--alb-texto-inverso);
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .pn-plataforma__barra { background: var(--alb-superficie-2); color: var(--alb-texto); } }
:root[data-tema="oscuro"] .pn-plataforma__barra { background: var(--alb-superficie-2); color: var(--alb-texto); }
.pn-plataforma__logo img { height: 32px; width: auto; display: block; }
.pn-plataforma__barra .alb-insignia { display: inline-flex; gap: var(--alb-espacio-1); align-items: center; }
.pn-plataforma__barra .alb-insignia .pn-icono { width: 14px; height: 14px; }
.pn-plataforma__admin { margin-left: auto; font-size: var(--alb-tam-s); opacity: 0.9; }
.pn-plataforma__salir { color: inherit; }
.pn-plataforma__nav { border-bottom: 1px solid var(--alb-borde); background: var(--alb-fondo); padding: 0 var(--alb-espacio-6); overflow-x: auto; }
.pn-plataforma__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--alb-espacio-1); }
.pn-plataforma__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--alb-espacio-4); color: var(--alb-texto-2); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.pn-plataforma__nav a[aria-current="page"] { color: var(--alb-texto); border-bottom-color: var(--alb-acento); font-weight: var(--alb-peso-medio); }
.pn-plataforma__principal { flex: 1; }
.pn-plataforma__cuerpo { display: grid; gap: var(--alb-espacio-5); }
.pn-kpi__enlace { font-size: var(--alb-tam-s); }
.pn-acciones-fila { display: flex; flex-wrap: wrap; gap: var(--alb-espacio-2); }
.pn-filtros { display: flex; flex-wrap: wrap; align-items: end; gap: var(--alb-espacio-3); margin-bottom: var(--alb-espacio-4); }
.pn-filtros .alb-campo { margin: 0; min-width: 220px; }
.pn-titulo-2 { margin: 0 var(--alb-espacio-3) 0 0; font-size: var(--alb-tam-2xl); display: inline; }
.pn-volver { font-size: var(--alb-tam-s); }
.pn-plan-admin { padding: 0; }
.pn-plan-admin > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); padding: var(--alb-espacio-4) var(--alb-espacio-5); min-height: 44px; }
.pn-plan-admin > summary strong { font-size: var(--alb-tam-l); }
.pn-plan-admin__precio { margin-left: auto; font-size: var(--alb-tam-s); }
.pn-plan-admin > .pn-form { padding: 0 var(--alb-espacio-5) var(--alb-espacio-5); }
.pn-form--tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--alb-espacio-4); }
.pn-form--cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--alb-espacio-4); }
.pn-casillas { display: flex; flex-wrap: wrap; gap: var(--alb-espacio-1) var(--alb-espacio-5); align-content: start; }
.pn-tarjetas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--alb-espacio-3); }
.pn-contacto { display: grid; gap: var(--alb-espacio-2); }
.pn-contacto--atendido { opacity: 0.75; }
.pn-contacto__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); }
.pn-contacto__mensaje { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- Constelación ------------------------------------------------------------- */
.pn-cielo-barra { display: flex; flex-wrap: wrap; align-items: end; gap: var(--alb-espacio-4); margin-bottom: var(--alb-espacio-4); }
.pn-cielo-barra__buscar { display: flex; gap: var(--alb-espacio-2); align-items: center; flex: 1 1 280px; max-width: 460px; }
.pn-cielo-barra__buscar .alb-entrada { flex: 1; min-width: 0; }
.pn-cielo-barra__cuenta { margin: 0 0 0 auto; font-size: var(--alb-tam-s); }
.pn-cielo-marco { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--alb-espacio-4); margin-bottom: var(--alb-espacio-4); }
.pn-cielo {
  position: relative; min-height: 560px; height: min(72vh, 760px); border-radius: var(--alb-radio-l); overflow: hidden;
  background: var(--alb-cielo-fondo); color: var(--alb-cielo-texto); box-shadow: var(--alb-sombra-2);
}
.pn-cielo__lienzo { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.pn-cielo__lienzo:focus-visible { outline: 3px solid var(--alb-cielo-foco); outline-offset: -3px; }
.pn-cielo__tarjeta {
  position: absolute; z-index: 2; max-width: 280px; pointer-events: none;
  padding: var(--alb-espacio-3) var(--alb-espacio-4); border-radius: var(--alb-radio-m);
  background: var(--alb-cielo-fondo-2); color: var(--alb-cielo-texto); border: 1px solid var(--alb-cielo-linea);
  box-shadow: var(--alb-sombra-3); font-size: var(--alb-tam-s);
}
.pn-cielo__tarjeta p { margin: 0; color: var(--alb-cielo-tenue); }
.pn-cielo__tarjeta .pn-cielo__tarjeta-nombre { color: var(--alb-cielo-texto); font-weight: var(--alb-peso-fuerte); font-size: var(--alb-tam-m); margin-bottom: var(--alb-espacio-1); }
.pn-cielo__tarjeta .pn-cielo__tarjeta-pista { color: var(--alb-cielo-oro); margin-top: var(--alb-espacio-2); font-size: var(--alb-tam-xs); }
.pn-cielo__controles { position: absolute; left: var(--alb-espacio-3); bottom: var(--alb-espacio-3); display: flex; gap: var(--alb-espacio-2); z-index: 2; }
.pn-cielo__controles .alb-boton { min-width: 44px; min-height: 44px; justify-content: center; background: var(--alb-cielo-fondo-2); color: var(--alb-cielo-texto); border-color: var(--alb-cielo-linea); }
.pn-boton-menos { font-size: var(--alb-tam-l); line-height: 1; }
.pn-cielo__ficha {
  position: absolute; z-index: 3; top: var(--alb-espacio-3); right: var(--alb-espacio-3); width: min(320px, calc(100% - 24px));
  display: grid; gap: var(--alb-espacio-3); padding: var(--alb-espacio-4); border-radius: var(--alb-radio-l);
  background: var(--alb-superficie); color: var(--alb-texto); box-shadow: var(--alb-sombra-3);
}
.pn-cielo__ficha p { margin: 0; }
.pn-cielo__ficha[hidden] { display: none; }
.pn-cielo__ficha-cabeza { display: flex; justify-content: space-between; align-items: start; gap: var(--alb-espacio-2); }
.pn-cielo__ficha-cabeza h2 { margin: 0; overflow-wrap: anywhere; }
.pn-cielo-lateral { display: grid; gap: var(--alb-espacio-3); align-content: start; }
.pn-cielo-lateral .pn-seccion__titulo { margin: 0; }
.pn-cielo-lateral__nota { margin: 0; font-size: var(--alb-tam-xs); }
.pn-cielo-grupos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--alb-espacio-2); max-height: 330px; overflow-y: auto; }
.pn-cielo-grupo { display: grid; gap: var(--alb-espacio-1); padding: var(--alb-espacio-2) var(--alb-espacio-3); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); background: var(--alb-superficie); }
.pn-cielo-grupo__ir { display: flex; justify-content: space-between; gap: var(--alb-espacio-2); align-items: baseline; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 32px; }
.pn-cielo-grupo__ir strong { overflow-wrap: anywhere; }
.pn-cielo-grupo__ir span { font-size: var(--alb-tam-xs); white-space: nowrap; }
.pn-cielo-grupo .pn-select-chico { width: 100%; }
.pn-cielo-leyenda, .pn-cielo-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--alb-espacio-2); font-size: var(--alb-tam-s); }
.pn-cielo-notas { font-size: var(--alb-tam-xs); }
.pn-cielo-leyenda li { display: flex; align-items: center; gap: var(--alb-espacio-2); }
.pn-cielo-muestra { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--alb-cielo-estrella); box-shadow: 0 0 0 3px var(--alb-cielo-fondo); }
.pn-cielo-muestra--comprador { background: var(--alb-cielo-oro); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); border-radius: 0; box-shadow: none; outline: 3px solid var(--alb-cielo-fondo); }
.pn-cielo-muestra--identificado { background: var(--alb-cielo-amatista); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); border-radius: 0; box-shadow: none; }
.pn-cielo-muestra--intencion { background: var(--alb-cielo-aurora); }
.pn-cielo-muestra--anonimo { width: 10px; height: 10px; margin: 2px; }
.pn-cielo-leyenda li { padding: 2px 0; }
.pn-cielo-tabla { margin-top: var(--alb-espacio-4); }
@media (max-width: 1100px) {
  .pn-cielo-marco { grid-template-columns: minmax(0, 1fr); }
  .pn-cielo-grupos { max-height: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 640px) {
  .pn-cielo { min-height: 440px; height: 62vh; }
  .pn-cielo-barra__cuenta { margin-left: 0; }
  .pn-banda-cobro { padding: var(--alb-espacio-3) var(--alb-espacio-4) 0; }
  .pn-plataforma__barra, .pn-plataforma__nav { padding-inline: var(--alb-espacio-4); }
  .pn-plataforma__admin { display: none; }
  .pn-form--tres, .pn-form--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-cielo-grupo__ir { min-height: 44px; }
}
.pn-kpis--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .pn-kpis--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Segundo factor de la plataforma */
.pn-acceso__tarjeta--media { width: min(560px, 100%); }
.pn-pasos-mfa { margin: 0 0 var(--alb-espacio-3); padding-left: var(--alb-espacio-5); display: grid; gap: var(--alb-espacio-2); font-size: var(--alb-tam-s); }
.pn-mfa { display: grid; gap: var(--alb-espacio-3); }
.pn-mfa p { margin: 0; }
.pn-mfa__caja { padding: var(--alb-espacio-3) var(--alb-espacio-4); border: 1px dashed var(--alb-borde-fuerte); border-radius: var(--alb-radio-m); background: var(--alb-superficie-2); justify-content: space-between; }
.pn-mfa__clave { font-size: var(--alb-tam-l); overflow-wrap: anywhere; }
.pn-mfa__respaldos { list-style: none; margin: 0; padding: var(--alb-espacio-3); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--alb-espacio-2); background: var(--alb-superficie-2); border-radius: var(--alb-radio-m); font-size: var(--alb-tam-m); }