/* ==========================================================================
   Alquila Ya · «Libro claro» — marco de la aplicación
   Menú lateral de 248 px que se pliega a un riel de 64 px, barra superior de
   56 px, encabezado de página, barra inferior en el teléfono y el panel de
   pendientes. Tres cortes: 768, 1024 y 1280 px.
   ========================================================================== */

@layer marco {
  .salto-contenido {
    position: fixed;
    left: var(--esp-3);
    top: -120px;
    z-index: 400;
    padding: var(--esp-2) var(--esp-4);
    border-radius: var(--radio-s);
    background: var(--color-primario-relleno);
    color: var(--color-sobre-primario);
    font-weight: 500;
    text-decoration: none;
  }
  .salto-contenido:focus { top: var(--esp-3); color: var(--color-sobre-primario); }

  /* ---------- Retícula del marco ----------------------------------------- */
  .marco {
    display: grid;
    grid-template-columns: var(--lateral-ancho) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
  }
  .marco-cuerpo { display: flex; flex-direction: column; min-width: 0; }
  .isotipo {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--marca-marino);
    box-shadow: inset 0 0 0 1px rgba(112, 222, 25, .45);
  }
  .isotipo-triangulo {
    display: block;
    width: 14px;
    height: 12px;
    background: var(--marca-lima);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }

  /* ---------- Menú lateral ----------------------------------------------- */
  .lat {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    height: 100vh;
    height: 100dvh;
    padding: var(--esp-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lateral-fondo);
    color: var(--lateral-texto);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
  }
  .lat :focus-visible { outline-color: var(--lateral-texto); }
  .lat-cab { display: flex; align-items: center; gap: var(--esp-2); min-height: 40px; padding: 0 var(--esp-1); }
  .lat-marca { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; color: #FFFFFF; text-decoration: none; border-radius: var(--radio-s); }
  .lat-marca:hover { color: #FFFFFF; }
  .lat-marca .isotipo { background: rgba(255, 255, 255, .06); }
  .lat-marca-txt { display: flex; flex-direction: column; line-height: 1.2; }
  .lat-marca-txt strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; }
  .lat-marca-txt span { font-size: var(--texto-xs); color: var(--lateral-texto-2); }
  .lat-cerrar { display: none; margin-left: auto; color: var(--lateral-texto); }
  .lat-cerrar:hover { background: var(--lateral-hover); color: #FFFFFF; }
  .lat-nav { display: flex; flex-direction: column; gap: var(--esp-4); flex: 1 0 auto; } /* D2: un grupo largo abierto empuja «Plegar» y el menú se desplaza (antes se montaban) */
  .lat-areas { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .lat-areas-pie { margin-top: auto; padding-top: var(--esp-3); border-top: 1px solid var(--lateral-borde); }
  .lat-grupo { position: relative; }
  .lat-grupo-btn {
    gap: var(--esp-3);
    min-height: 36px;
    padding: 0 var(--esp-2);
    border-radius: var(--radio-s);
    color: var(--lateral-texto);
    font-size: var(--texto-m);
    font-weight: 500;
    user-select: none;
  }
  .lat-grupo-btn::before { order: 2; margin-left: auto; opacity: .55; }
  .lat-grupo-btn:hover { background: var(--lateral-hover); color: #FFFFFF; }
  .lat-grupo-btn .ico { color: var(--lateral-texto-2); }
  .lat-grupo[data-actual] > .lat-grupo-btn, .lat-grupo[data-actual] > .lat-grupo-btn .ico { color: #FFFFFF; }
  /* D4: área de un solo enlace (Ajustes): sin flecha; la actual, con la barra lima */
  .lat-directo { position: relative; display: flex; align-items: center; text-decoration: none; }
  .lat-directo:hover { text-decoration: none; }
  .lat-directo[data-actual] { background: var(--lateral-activo); }
  .lat-directo[data-actual], .lat-directo[data-actual] .ico { color: #FFFFFF; }
  .lat-directo[data-actual]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--marca-lima); opacity: 1; }
  .lat-panel-titulo { display: none; }
  .lat-lista { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 var(--esp-2); padding: 0; list-style: none; }
  .lat-enlace {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 6px var(--esp-2) 6px 38px;
    border: 0;
    border-radius: var(--radio-s);
    background: transparent;
    color: var(--lateral-texto-2);
    font: inherit;
    font-size: var(--texto-m);
    line-height: var(--lh-m);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .lat-enlace:hover { background: var(--lateral-hover); color: #FFFFFF; }
  .lat-enlace[aria-current="page"] { background: var(--lateral-activo); color: #FFFFFF; font-weight: 500; }
  .lat-enlace[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--marca-lima);
  }
  .lat-plegar {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    min-height: 36px;
    padding: 0 var(--esp-2);
    border: 0;
    border-radius: var(--radio-s);
    background: transparent;
    color: var(--lateral-texto-2);
    font: inherit;
    font-size: var(--texto-s);
    cursor: pointer;
  }
  .lat-plegar:hover { background: var(--lateral-hover); color: #FFFFFF; }
  .lat-velo { display: none; }

  /* Riel de 64 px: solo íconos; cada área abre su lista en un panel flotante.
     html[data-riel] lo fija el guion del <head>: por preferencia en escritorio
     y siempre entre 768 y 1023 px. */
  @media (min-width: 768px) {
    html[data-riel="1"] .marco { grid-template-columns: var(--riel-ancho) minmax(0, 1fr); }
    html[data-riel="1"] .lat { padding: var(--esp-3) var(--esp-2); overflow: visible; align-items: center; }
    html[data-riel="1"] .lat-txt {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    html[data-riel="1"] .lat-marca-txt { display: none; }
    html[data-riel="1"] .lat-grupo-btn { justify-content: center; width: 44px; min-height: 40px; padding: 0; }
    html[data-riel="1"] .lat-grupo-btn::before { display: none; }
    html[data-riel="1"] .lat-directo[data-actual], html[data-riel="1"] .lat-grupo[data-actual] > .lat-grupo-btn { background: var(--lateral-activo); box-shadow: inset 3px 0 0 var(--marca-lima); }
    html[data-riel="1"] .lat-panel {
      position: absolute;
      top: 0;
      left: calc(100% + var(--esp-3));
      z-index: 90;
      min-width: 232px;
      padding: var(--esp-2);
      border: 1px solid var(--color-borde);
      border-radius: var(--radio-m);
      background: var(--color-superficie);
      box-shadow: var(--sombra-flotante);
      animation: aparece var(--dur-base) var(--curva);
    }
    html[data-riel="1"] .lat-areas-pie .lat-panel { top: auto; bottom: 0; }
    html[data-riel="1"] .lat-panel-titulo { display: block; padding: var(--esp-1) var(--esp-3) var(--esp-2); font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); }
    html[data-riel="1"] .lat-lista { margin: 0; }
    html[data-riel="1"] .lat-enlace { padding-left: var(--esp-3); color: var(--color-texto); }
    html[data-riel="1"] .lat-enlace:hover { background: var(--color-superficie-sutil); color: var(--color-texto); }
    html[data-riel="1"] .lat-enlace[aria-current="page"] { background: var(--color-primario-sutil); color: var(--color-primario); }
    html[data-riel="1"] .lat-enlace[aria-current="page"]::before { background: var(--color-primario); }
    html[data-riel="1"] .lat-panel :focus-visible { outline-color: var(--color-foco); }
    html[data-riel="1"] .lat-plegar { justify-content: center; width: 44px; padding: 0; }
    html[data-riel="1"] .lat-plegar .ico { transform: scaleX(-1); }
  }

  /* ---------- Barra superior (56 px) ------------------------------------- */
  .sup {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    height: var(--barra-alto);
    padding: 0 var(--contenido-pad);
    border-bottom: 1px solid var(--color-borde);
    background: var(--color-lienzo);
    background: color-mix(in srgb, var(--color-lienzo) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
  }
  .sup-marca { display: none; border-radius: var(--radio-s); }
  .sup-buscar-grupo { display: flex; align-items: center; gap: var(--esp-2); flex: 1 1 auto; min-width: 0; max-width: 520px; }
  .sup-buscar {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 6px 0 var(--esp-3);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-s);
    background: var(--color-superficie);
    color: var(--color-texto-3);
    font-size: var(--texto-m);
    text-decoration: none;
    transition: border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
  }
  .sup-buscar:hover { border-color: var(--color-borde-control); color: var(--color-texto-2); }
  .sup-buscar-txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sup-kbd { flex: none; }
  .sup-der { display: flex; align-items: center; gap: var(--esp-2); flex: none; margin-left: auto; }
  .sup-nuevo .btn .ico { width: 16px; height: 16px; }
  .campana-contenedor { position: relative; }
  .sup-pendientes { gap: var(--esp-2); padding: 0 var(--esp-3); color: var(--color-texto-2); }
  .sup-contador {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radio-pleno);
    background: var(--color-primario-relleno);
    color: var(--color-sobre-primario);
    font-size: var(--texto-xs);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .sup-contador.es-critica { background: var(--color-negativo-relleno); color: #FFFFFF; }
  .sup-contador.es-cero { background: var(--color-superficie-sutil); color: var(--color-texto-3); }
  .sup-tasa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--esp-3);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-s);
    background: var(--color-superficie);
    color: var(--color-texto-2);
    font-size: var(--texto-s);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
  }
  .sup-tasa:hover { border-color: var(--color-borde-control); color: var(--color-texto); }
  .sup-tasa .ico { width: 16px; height: 16px; }
  .sup-tasa-rotulo { font-weight: 500; color: var(--color-texto-3); }
  .sup-tasa-valor { font-weight: 600; color: var(--color-texto); }
  .sup-tasa-eur { padding-left: 8px; border-left: 1px solid var(--color-borde); }
  .sup-tasa-fecha { font-size: var(--texto-xs); }
  .sup-tasa.es-aviso { border-color: var(--color-aviso-borde); background: var(--color-aviso-sutil); color: var(--color-aviso); }
  .sup-tasa.es-aviso .sup-tasa-rotulo, .sup-tasa.es-aviso .sup-tasa-valor { color: var(--color-aviso); }
  .sup-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-pleno);
    background: var(--marca-marino);
    color: #FFFFFF;
    box-shadow: 0 0 0 1px var(--color-borde);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
  }
  @media (pointer: coarse) { button.sup-avatar { width: 40px; height: 40px; } }

  /* Paneles de la barra: + Nuevo y Mi cuenta */
  .menu-nuevo { min-width: 248px; }
  .cuenta-panel { width: 304px; }
  .cuenta-cab { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3); }
  .cuenta-cab strong { display: block; font-weight: 600; }
  .cuenta-cab span:not(.sup-avatar) { display: block; font-size: var(--texto-s); color: var(--color-texto-3); }
  .cuenta-grupo { margin: 0 0 var(--esp-1); padding: 0; border: 0; min-width: 0; }
  .opciones-fila label .ico { width: 15px; height: 15px; margin-right: 6px; }
  .desplegable-lista > li > form > button { display: flex; align-items: center; gap: var(--esp-3); width: 100%; }
  .cuenta-salir .btn { justify-content: flex-start; padding: 0 var(--esp-3); color: var(--color-texto); }
  .cuenta-salir .btn:hover { color: var(--color-negativo); }
  .desplegable-lista a .chip { margin-left: auto; }

  /* Pendientes: panel con lo primero de hoy */
  .centro-alertas-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(440px, calc(100vw - 2 * var(--esp-4)));
    max-height: min(78vh, 720px);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-l);
    background: var(--color-superficie);
    box-shadow: var(--sombra-flotante);
    animation: aparece var(--dur-base) var(--curva);
  }
  .centro-alertas-popover[hidden] { display: none; }
  .centro-alertas-cab { display: flex; align-items: center; gap: var(--esp-2); flex: none; padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-5); border-bottom: 1px solid var(--color-borde); }
  .centro-alertas-titulo { font-size: var(--titulo-3); font-weight: 600; }
  .centro-alertas-cab-acc { display: flex; align-items: center; gap: var(--esp-1); margin-left: auto; }
  .centro-alertas-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--esp-3) var(--esp-4); }
  .centro-alertas-pie { display: flex; flex-wrap: wrap; gap: var(--esp-2); flex: none; padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--color-borde); background: var(--color-superficie-sutil); border-radius: 0 0 var(--radio-l) var(--radio-l); }
  .centro-alertas-top3 { display: flex; flex-direction: column; gap: var(--esp-2); }
  .centro-top3-cab { margin: 0; font-size: var(--texto-s); line-height: var(--lh-s); font-weight: 600; }
  .centro-alerta-item {
    display: grid;
    gap: var(--esp-2);
    padding: var(--esp-3);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    background: var(--color-superficie);
  }
  .centro-alerta-item.sev-CRITICA { border-left: 3px solid var(--color-negativo); }
  .centro-alerta-item strong { display: block; margin-top: 4px; font-weight: 500; }
  .centro-alerta-item .tenue { font-size: var(--texto-s); }
  .centro-alerta-item-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

  /* ---------- Contenido y encabezado de página -------------------------- */
  .principal {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--contenido-max);
    min-width: 0;
    margin: 0 auto;
    padding: var(--esp-6) var(--contenido-pad) var(--esp-12);
  }
  .principal:focus { outline: none; }
  .cab-pagina { margin-bottom: var(--esp-6); }
  .cab-migas { margin-bottom: var(--esp-1); font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-3); }
  .cab-migas a { color: var(--color-texto-2); text-decoration-color: var(--color-borde-control); }
  .cab-migas a:hover { color: var(--color-primario); text-decoration-color: currentColor; }
  /* D4: título y acciones en una fila; la descripción (o el resumen en una línea)
     debajo, a todo lo ancho, para que no se parta en dos líneas sin necesidad.
     Las pantallas sin migas reservan su alto: el h1 cae a la misma altura en todas. */
  .marco .cab-pagina:not(:has(> .cab-migas)) { padding-top: calc(var(--lh-s) + var(--esp-1)); }
  /* El asistente dice su nombre en pantallas anchas; en las angostas queda el ícono */
  .sup-copiloto-txt { display: none; }
  @media (min-width: 1024px) {
    #btn-copiloto { width: auto; gap: var(--esp-2); padding: 0 var(--esp-3); }
    #btn-copiloto .sup-copiloto-txt { display: inline; }
  }
  .cab-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-1) var(--esp-6); }
  .cab-textos { display: contents; }
  .cab-titulo { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
  .cab-descripcion { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--color-texto-2); }
  .cab-descripcion:not(:has(.tf-resumen)) { max-width: 80ch; }
  .cab-acciones { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--esp-2); max-width: 100%; }
  .cab-mas-panel { min-width: 260px; }
  .cab-acciones-menu { display: flex; flex-direction: column; gap: 1px; }
  .pie { width: 100%; max-width: var(--contenido-max); margin: 0 auto; padding: 0 var(--contenido-pad) var(--esp-6); font-size: var(--texto-xs); color: var(--color-texto-3); }

  /* Aviso crítico (falta la tasa de hoy) y aviso con acciones: en la página,
     sin taparle nada a la persona y sin cerrarse solos */
  .banner-critico-notif, .toast-notif-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--esp-3);
    margin-bottom: var(--esp-4);
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--color-negativo-borde);
    border-left: 3px solid var(--color-negativo);
    border-radius: var(--radio-m);
    background: var(--color-negativo-sutil);
  }
  .banner-critico-notif:focus { outline: 2px solid var(--color-foco); outline-offset: 2px; }
  .banner-critico-ic { color: var(--color-negativo); margin-top: 1px; }
  .banner-critico-texto { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .banner-critico-sub { color: var(--color-texto-2); font-size: var(--texto-s); }
  .banner-critico-acciones, .toast-notif-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
  .toast-notif-card { flex-direction: column; gap: var(--esp-2); border-color: var(--color-aviso-borde); border-left-color: var(--color-aviso); background: var(--color-aviso-sutil); }
  .toast-notif-cab { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .toast-notif-etq { display: inline-flex; align-items: center; gap: 6px; font-size: var(--texto-xs); font-weight: 500; color: var(--color-aviso); }
  .toast-notif-etq .ico { width: 14px; height: 14px; }
  .toast-notif-motivo { margin: 0; color: var(--color-texto-2); font-size: var(--texto-s); }

  /* Barra de progreso: aparece solo si la navegación pasa de 300 ms */
  .barra-progreso { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 2px; pointer-events: none; }
  .barra-progreso > span { display: block; width: 0; height: 100%; background: var(--color-primario-relleno); }
  .barra-progreso.activa > span { animation: progreso 8s var(--curva) 300ms forwards; }
  @keyframes progreso { 0% { width: 0; } 10% { width: 32%; } 100% { width: 92%; } }

  /* Pantallas públicas (acceso y errores sin sesión) */
  .marco-publico { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  .pub-cab { display: flex; align-items: center; gap: var(--esp-3); height: var(--barra-alto); padding: 0 var(--contenido-pad); border-bottom: 1px solid var(--color-borde); background: var(--color-superficie); }
  .pub-marca { display: flex; flex-direction: column; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
  .pub-marca span { font-size: var(--texto-xs); font-weight: 400; color: var(--color-texto-3); }
  .marco-publico .principal { max-width: 1120px; }

  /* Modo presentación: pantalla limpia para reuniones */
  .barra-presentacion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--contenido-pad); border-bottom: 1px solid var(--color-borde); background: var(--color-superficie); }
  .barra-presentacion[hidden] { display: none; }
  .barra-presentacion-marca { display: inline-flex; align-items: center; gap: var(--esp-3); }
  .barra-presentacion-subtitulo { font-weight: 400; color: var(--color-texto-2); }
  .barra-presentacion-nav { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
  html[data-presentacion="1"] .marco { grid-template-columns: minmax(0, 1fr); }
  html[data-presentacion="1"] .lat,
  html[data-presentacion="1"] .sup,
  html[data-presentacion="1"] .inf,
  html[data-presentacion="1"] .pie,
  html[data-presentacion="1"] .cab-acciones { display: none; }

  /* ---------- Corte 1279 px: la barra se acomoda sin desbordar ----------- */
  @media (max-width: 1279px) {
    .sup-tasa-eur { display: none; }
  }
  @media (max-width: 1023px) {
    .sup-pend-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .sup-kbd { display: none; }
  }

  /* Entre 768 y 1023 px el menú queda siempre como riel: no hay nada que plegar */
  @media (min-width: 768px) and (max-width: 1023px) {
    .lat-plegar { display: none; }
  }

  /* ---------- Teléfono (< 768 px): cajón y barra inferior --------------- */
  .inf { display: none; }
  @media (max-width: 767px) {
    .marco { display: block; }
    .marco-cuerpo { min-height: 100dvh; padding-bottom: calc(var(--inferior-alto) + env(safe-area-inset-bottom, 0px)); }
    .lat {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 120;
      width: min(320px, 88vw);
      height: 100dvh;
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform var(--dur-lenta) var(--curva-salida), visibility 0s linear var(--dur-lenta);
    }
    .marco.menu-abierto .lat {
      transform: none;
      visibility: visible;
      box-shadow: 0 0 48px rgba(0, 0, 0, .35);
      transition: transform var(--dur-lenta) var(--curva);
    }
    .lat-cerrar { display: inline-flex; }
    .lat-plegar { display: none; }
    .lat-velo { position: fixed; inset: 0; z-index: 110; display: block; background: var(--color-velo); }
    .lat-velo[hidden] { display: none; }

    /* Sin desenfoque: backdrop-filter haría de la barra el bloque contenedor de los
       paneles fijos (+ Nuevo y Mi cuenta) y quedarían fuera de la pantalla. */
    .sup { gap: var(--esp-2); background: var(--color-lienzo); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .sup-marca { display: inline-flex; }
    .sup-buscar-grupo { flex: 0 0 auto; }
    .sup-buscar { flex: none; justify-content: center; width: 40px; height: 40px; padding: 0; }
    .sup-buscar-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    #btn-nuevo, .campana-contenedor { display: none; }
    .sup-tasa { height: 36px; padding: 0 10px; }
    #menu-nuevo {
      position: fixed;
      top: auto;
      left: var(--esp-3);
      right: var(--esp-3);
      bottom: calc(var(--inferior-alto) + var(--esp-2) + env(safe-area-inset-bottom, 0px));
      max-width: none;
    }
    .cuenta-panel { position: fixed; top: calc(var(--barra-alto) + var(--esp-1)); right: var(--esp-3); left: var(--esp-3); width: auto; max-width: none; }
    .cab-titulo { font-size: var(--titulo-1-movil); line-height: var(--lh-t2); }
    .cab-fila { grid-template-columns: minmax(0, 1fr); }
    .cab-titulo, .cab-descripcion, .cab-acciones { grid-column: 1; grid-row: auto; }
    .cab-acciones { justify-content: flex-start; margin-top: var(--esp-2); }
    /* «¿Cómo se hace?» pasa a un ícono junto al título: no ocupa una fila entera */
    .cab-fila:has([data-ayuda-cab]) { position: relative; }
    .cab-fila:has([data-ayuda-cab]) .cab-titulo { padding-right: calc(var(--control-alto) + var(--esp-2)); }
    .cab-acciones [data-ayuda-cab] {
      position: absolute; top: 0; right: 0;
      width: var(--control-alto); min-width: 0; height: var(--control-alto); padding: 0; justify-content: center;
    }
    .cab-acciones [data-ayuda-cab] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .cab-acciones:not(:has(> :not([data-ayuda-cab]))) { margin-top: 0; }
    .cab-pagina { margin-bottom: var(--esp-4); }
    .marco .cab-pagina:not(:has(> .cab-migas)) { padding-top: 0; }
    .inf {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      height: calc(var(--inferior-alto) + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
      border-top: 1px solid var(--color-borde);
      background: var(--color-superficie);
    }
    .inf-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-width: 0;
      padding: 0 2px;
      border: 0;
      background: transparent;
      color: var(--color-texto-2);
      font: inherit;
      font-size: var(--texto-xs);
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
    }
    .inf-item > span:not(.inf-contador) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .inf-item .ico { width: 22px; height: 22px; }
    .inf-item[aria-current="page"] { color: var(--color-primario); }
    .inf-item[aria-current="page"]::before {
      content: "";
      position: absolute;
      top: 0;
      left: 28%;
      right: 28%;
      height: 2px;
      border-radius: 0 0 2px 2px;
      background: currentColor;
    }
    .inf-nuevo .ico { width: 36px; height: 30px; padding: 5px 8px; border-radius: 10px; background: var(--color-primario-relleno); color: var(--color-sobre-primario); }
    .inf-contador {
      position: absolute;
      top: 6px;
      left: calc(50% + 6px);
      display: inline-grid;
      place-items: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: var(--radio-pleno);
      background: var(--color-negativo-relleno);
      color: #FFFFFF;
      font-size: var(--texto-xs);
      font-weight: 600;
      line-height: 1;
    }
  }

  /* ---------- «¿Cómo se hace?» (D14): tareas de la pantalla en el panel lateral ---------- */
  .ayp-tarea + .ayp-tarea { margin-top: var(--esp-8); padding-top: var(--esp-6); border-top: 1px solid var(--color-borde); }
  .ayp-titulo { margin: 0; font-size: var(--titulo-3); line-height: var(--lh-l); font-weight: 600; }
  .ayp-para { margin: var(--esp-1) 0 var(--esp-4); font-size: var(--texto-s); color: var(--color-texto-3); }
  .ayp-pasos, .copiloto-pasos { margin: 0; padding-left: var(--esp-6); color: var(--color-texto); }
  .ayp-pasos li + li, .copiloto-pasos li + li { margin-top: var(--esp-2); }
  .ayp-pasos li::marker, .copiloto-pasos li::marker { font-weight: 600; color: var(--color-texto-3); }
  .ayp-sub { margin: var(--esp-5) 0 var(--esp-1); font-size: var(--texto-s); font-weight: 600; color: var(--color-texto-2); }
  .ayp-notas { margin: 0; padding-left: var(--esp-5); font-size: var(--texto-s); color: var(--color-texto-2); }
  .ayp-notas li + li { margin-top: var(--esp-1); }
  .ayp-pie { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-5) 0 0; }
  .copiloto-pasos { margin-top: var(--esp-3); font-size: var(--texto-s); }
  .copiloto-pasos[hidden] { display: none; }

  @media print {
    .lat, .lat-velo, .sup, .inf, .pie, .salto-contenido, .barra-progreso { display: none; }
    .marco { display: block; }
    .principal { max-width: none; padding: 0; }
  }
}