/* NOMBRE_APP · navegación (sección 1): marca, barra superior flotante en píldora (lo público),
   barra lateral (escritorio), cajón y barra inferior de 5 pestañas (móvil) y pie.
   El papel es el suelo; lo que flota (píldora superior, barra inferior) lleva --sombra-flotante. */

.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 32px); }

/* ── Marca: sello «§» en Literata sobre pastilla marino + nombre. Se cambia en componentes.mjs ── */
.marca { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: var(--tinta); text-decoration: none; }
.marca:hover { color: var(--tinta); text-decoration: none; }
.marca__sello {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: var(--marino); color: #fff; font: 600 21px/1 var(--letra-serif); font-variation-settings: 'opsz' 36;
  padding-bottom: 2px;
}
.marca__nombre { font: 700 19px/1 var(--letra-display); letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Lo público: barra superior flotante en píldora ───────────────── */
.cabecera-publica { position: sticky; top: 0; z-index: 30; padding: 12px clamp(12px, 3vw, 32px) 0; pointer-events: none; }
.cabecera-publica__pildora {
  pointer-events: auto; display: flex; align-items: center; gap: var(--esp-3); max-width: 1136px; min-height: 60px;
  margin: 0 auto; padding: 6px 8px 6px 14px; border: 1px solid var(--linea-suave); border-radius: var(--radio-pildora);
  background: rgb(255 255 255 / .92); box-shadow: var(--sombra-flotante);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.cabecera-publica__enlaces { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cabecera-publica__enlaces a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--radio-pildora);
  color: var(--tinta-2); font-size: .9375rem; font-weight: 550; text-decoration: none;
  transition: background-color var(--mv), color var(--mv);
}
.cabecera-publica__enlaces a:hover { background: var(--crema); color: var(--tinta); text-decoration: none; }
.cabecera-publica__cuenta { display: flex; align-items: center; gap: var(--esp-2); flex: none; }
.cabecera-publica__cuenta .boton { min-height: 44px; padding-inline: 20px; }
.cabecera-publica__entrar { border: 1.5px solid var(--marino); color: var(--marino); background: transparent; font-weight: 700; }
.cabecera-publica__entrar:hover { background: var(--marino-suave); border-color: var(--marino); color: var(--marino-fuerte); }
.publico { padding-block: var(--esp-6) 0; }
@media (max-width: 860px) {
  .cabecera-publica__enlaces { display: none; }
  .cabecera-publica__cuenta { margin-left: auto; }
}
@media (max-width: 400px) {
  .cabecera-publica { padding: 8px 8px 0; }
  .cabecera-publica__pildora { min-height: 56px; padding: 5px 6px 5px 10px; }
  .marca { gap: 8px; }
  .marca__sello { width: 30px; height: 30px; font-size: 19px; }
  .marca__nombre { font-size: 17px; }
  .cabecera-publica__cuenta .boton { padding-inline: 16px; }
}

/* ── Pie ───────────────────────────────────────────────────────────── */
.pie { margin-top: var(--esp-10); background: var(--navy); color: var(--navy-texto); font-size: var(--tam-m); }
.pie .contenedor { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-6) var(--esp-8); padding-block: var(--esp-8) var(--esp-7); }
.pie__marca { display: grid; gap: var(--esp-3); max-width: 40ch; }
.pie__marca .marca, .pie__marca .marca:hover { color: #fff; }
.pie__marca .marca__sello { background: #fff; color: var(--navy); }
.pie nav { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-5); }
.pie a { display: inline-flex; align-items: center; min-height: 44px; color: #e3eaf4; }
.pie a:hover { color: #fff; }
.pie :focus-visible { outline-color: #fff; }

/* ── App con sesión ────────────────────────────────────────────────── */
.app { min-height: 100vh; min-height: 100dvh; }
.app__cuerpo { min-width: 0; }
@media (min-width: 1024px) { .app__cuerpo { margin-left: var(--ancho-lateral); } }

.lateral {
  position: fixed; z-index: 50; inset: 0 auto 0 0; width: var(--ancho-lateral); display: flex; flex-direction: column;
  background: var(--lateral); border-right: 1px solid var(--linea);
}
.lateral__marca { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); min-height: 76px; padding: 12px 20px; }
.lateral__cerrar { display: none; }
.lateral__desplazable { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 24px; scrollbar-color: var(--linea-fuerte) transparent; }
.lateral__pie { display: flex; align-items: center; gap: var(--esp-2); min-height: 56px; padding: 8px 20px; border-top: 1px solid var(--linea); color: var(--tenue); font-size: var(--tam-s); }
.lateral__pie a { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; color: var(--tenue); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.lateral__pie a:hover { color: var(--tinta); text-decoration: underline; }
.punto-vivo { display: none; }

/* «Hoy»: la tarea del día, lo primero de la lateral. La etiqueta queda para lectores de pantalla. */
.hoy { margin: 0 4px; padding: 16px; border: 1px solid var(--linea-suave); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra-suave); }
.hoy__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hoy__titulo { color: var(--tinta); font: 600 var(--tam-l)/1.25 var(--letra-serif); }
.hoy .barra { margin: 10px 0 8px; height: 4px; }
.hoy__detalle { color: var(--tenue); font-size: var(--tam-s); line-height: 1.45; }
.hoy .boton { margin-top: var(--esp-3); width: 100%; min-height: 40px; }

/* Secciones y entradas del menú: el elemento actual es una píldora blanca sobre la lateral. */
.nav-seccion { margin: var(--esp-6) 12px var(--esp-1); color: var(--tenue); font-size: var(--tam-s); font-weight: 600; }
.nav-btn {
  position: relative; display: flex; align-items: center; gap: var(--esp-3); min-height: 44px; padding: 8px 14px; margin: 2px 0;
  border: 1px solid transparent; border-radius: var(--radio-pildora); color: var(--tinta-2); font-size: .9375rem; font-weight: 550; text-decoration: none;
  transition: background-color var(--mv), color var(--mv), box-shadow var(--mv);
}
.nav-btn svg.icono { width: 20px; height: 20px; color: var(--tenue); transition: color var(--duracion) var(--curva); }
.nav-btn:hover { background: rgb(255 255 255 / .65); color: var(--tinta); text-decoration: none; }
.nav-btn:hover svg.icono { color: var(--tinta-2); }
.nav-btn[aria-current="page"] { background: var(--superficie); border-color: var(--linea-suave); box-shadow: var(--sombra); color: var(--tinta); font-weight: 700; }
.nav-btn[aria-current="page"] svg.icono { color: var(--marino); }
.nav-btn .ip { width: 26px; height: 26px; transition: transform var(--duracion) var(--curva); }
.nav-btn[aria-current="page"] .ip { transform: scale(1.08); }
.nav-btn .contador { margin-left: auto; min-width: 24px; padding: 1px 7px; border-radius: var(--radio-pildora); background: var(--mal-suave); color: var(--mal-tinta); font-size: var(--tam-xs); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* Cabecera de la pantalla: miga «Sección / Pantalla» + cuenta */
.cabecera-app {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--esp-3); min-height: 64px;
  padding: 10px clamp(16px, 3vw, 40px); background: rgb(251 250 246 / .9); border-bottom: 1px solid var(--linea-suave);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.cabecera-app__miga { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: var(--esp-2); }
.cabecera-app__miga strong { order: 2; min-width: 0; color: var(--tinta); font-size: .9375rem; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera-app__miga span { order: 1; flex: none; color: var(--tenue); font-size: .9375rem; font-weight: 500; }
.cabecera-app__miga span:not(:empty)::after { content: '/'; margin-left: var(--esp-2); color: var(--linea-fuerte); }
.cabecera-app__menu { display: none; }
.usuario-boton {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 44px; padding: 4px 14px 4px 4px; flex: none;
  border: 1px solid transparent; border-radius: var(--radio-pildora); color: var(--tinta-2); font-weight: 600; text-decoration: none;
}
.usuario-boton:hover { border-color: var(--linea); background: var(--superficie); color: var(--tinta); text-decoration: none; }
.usuario-boton__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--marino-suave); color: var(--marino); }
.usuario-boton__avatar svg.icono { width: 18px; height: 18px; }
.usuario-boton__nombre { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tam-m); }

.area { padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px) var(--esp-8); max-width: 1200px; margin: 0 auto; }

/* ── Móvil y tableta: lateral como cajón + barra inferior de 5 pestañas ── */
.barra-inferior { display: none; }
@media (max-width: 1023px) {
  .lateral {
    transform: translateX(-104%); visibility: hidden; width: min(var(--ancho-lateral), 86vw);
    border-radius: 0 var(--radio-xl) var(--radio-xl) 0;
    transition: transform var(--mv-larga-s) var(--mv-cajon), visibility 0s linear var(--mv-larga-s);
  }
  .app.menu-abierto .lateral { transform: none; visibility: visible; box-shadow: var(--sombra-alta); transition: transform var(--mv-larga) var(--mv-cajon); }
  .app.menu-abierto .velo { position: fixed; inset: 0; z-index: 45; background: rgb(23 25 31 / .4); }
  .lateral__marca { min-height: 64px; padding: 8px 12px 8px 20px; }
  .lateral__cerrar { display: inline-grid; background: transparent; border-color: transparent; }
  .cabecera-app { min-height: 56px; padding: 6px 8px; gap: var(--esp-1); }
  .cabecera-app__menu { display: inline-grid; border-color: transparent; background: transparent; }
  .cabecera-app__miga span { display: none; }
  .cabecera-app__miga strong { font-size: var(--tam-base); }
  .usuario-boton { padding: 4px; }
  .usuario-boton__nombre { display: none; }
  .area { padding: var(--esp-5) 16px calc(var(--barra-movil) + 48px + env(safe-area-inset-bottom, 0px)); }

  /* Barra inferior flotante: una píldora blanca sobre el papel, con la pestaña actual en marino. */
  .barra-inferior {
    position: fixed; z-index: 40; inset: auto 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; max-width: 520px; margin: 0 auto;
    min-height: var(--barra-movil); padding: 6px; border: 1px solid var(--linea-suave); border-radius: 28px;
    background: rgb(255 255 255 / .94); box-shadow: var(--sombra-flotante);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  }
  .barra-inferior a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 52px; padding: 4px 2px; border-radius: 22px;
    color: var(--tenue); font-size: var(--tam-xs); font-weight: 600; line-height: 1.15; text-decoration: none;
    transition: color var(--mv), background-color var(--mv);
  }
  .barra-inferior span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-inferior svg.icono { width: 22px; height: 22px; }
  .barra-inferior a:hover { color: var(--tinta); text-decoration: none; }
  .barra-inferior [aria-current="page"] { background: var(--marino-suave); color: var(--marino); font-weight: 700; }
  .barra-inferior [aria-current="page"] svg.icono { color: var(--marino); }
  /* Pestañas con iconos propios: la actual, un poco más grande (y se anima al entrar). */
  .barra-inferior .ip { width: 28px; height: 28px; transition: transform var(--duracion) var(--curva); }
  .barra-inferior [aria-current="page"] .ip { transform: translateY(-1px) scale(1.08); }
  .barra-inferior :focus-visible { outline-offset: -2px; border-radius: 22px; }
}
@media (max-width: 359px) {
  .barra-inferior { inset-inline: 6px; padding: 4px; }
  .barra-inferior svg.icono { width: 20px; height: 20px; }
  .barra-inferior .ip { width: 26px; height: 26px; }
}