/* Rediseño fase 1 (Task 2): barra y pestañas. Valores de diseno/rediseno-oct/barra.css sobre la barra de inicio-v8.html y
   estudiar-plantilla-v7.html: sin caja ni borde, un degradado que se funde con la página y difumina lo que pasa por detrás;
   el logo sobre vidrio; las opciones en palabras lima, la activa con brillo y un punto. Abajo en el celular (≤ 760 px). */
:root {
  --alto-barra: 64px;
  --rd-lima: #4F7A0E/*tema:fijo*/;
  --rd-tope: rgba(244, 245, 240, .86)/*tema:fijo*/;
  --rd-vidrio: rgba(244, 245, 240, .5)/*tema:fijo*/;
  --rd-suave: rgba(18, 21, 16, .06)/*tema:fijo*/;
  --rd-tabs: rgba(244, 245, 240, .86)/*tema:fijo*/;
  --rd-punto-brillo: none;
}
:root[data-theme="dark"] {
  --rd-lima: #D4F57B/*tema:fijo*/;
  --rd-tope: rgba(12, 14, 16, .78)/*tema:fijo*/;
  --rd-vidrio: rgba(12, 14, 16, .5)/*tema:fijo*/;
  --rd-suave: rgba(245, 245, 240, .08)/*tema:fijo*/;
  --rd-tabs: rgba(12, 14, 16, .84)/*tema:fijo*/;
  --rd-punto-brillo: 0 0 8px #D4F57B/*tema:fijo*/;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rd-lima: #D4F57B/*tema:fijo*/;
    --rd-tope: rgba(12, 14, 16, .78)/*tema:fijo*/;
    --rd-vidrio: rgba(12, 14, 16, .5)/*tema:fijo*/;
    --rd-suave: rgba(245, 245, 240, .08)/*tema:fijo*/;
    --rd-tabs: rgba(12, 14, 16, .84)/*tema:fijo*/;
    --rd-punto-brillo: 0 0 8px #D4F57B/*tema:fijo*/;
  }
}
.rd-barra, .rd-barra *, .rd-tabs, .rd-tabs * { box-sizing: border-box; }

/* Barra de arriba: sticky, sin caja; el ::before difumina lo que pasa por detrás y se desvanece hacia abajo */
.rd-barra {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: calc(var(--alto-barra) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(16px, 4vw) 0;
  background: linear-gradient(var(--rd-tope), rgba(12, 14, 16, 0)/*tema:fijo*/) no-repeat;
  color: var(--ink);
}
.rd-barra::before {
  content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(#000/*tema:fijo*/ 55%, transparent); mask-image: linear-gradient(#000/*tema:fijo*/ 55%, transparent);
}
html[data-cyber-barra] .rd-barra { top: var(--fund-barra-alto); }
.rd-barra button { font-family: inherit; cursor: pointer; }

/* El logo siempre sobre un vidrio difuminado, para que no se pierda contra títulos o fotos claras */
.rd-marca {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  padding: 6px 14px 6px 10px; margin-left: -10px; border: 0; border-radius: 999px;
  background: var(--rd-vidrio);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.rd-marca .u-logo > svg { display: block; width: 172px; height: auto; }
.rd-barra .rd-marca .u-logo svg [fill="#D4F57B"/*tema:fijo*/] { fill: var(--rd-lima); }
.rd-barra .rd-marca .u-logo svg [fill="#F5F5F0"/*tema:fijo*/] { fill: var(--ink); }

/* Opciones: solo las palabras en lima sobre un vidrio apenas visible */
.rd-pestanas {
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(12, 14, 16, .08)/*tema:fijo*/; border: 1px solid rgba(245, 245, 240, .06)/*tema:fijo*/;
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06)/*tema:fijo*/;
}
.rd-pestana {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  color: var(--rd-lima); font-size: 15px; font-weight: 600; opacity: .55; transition: opacity .25s;
}
.rd-pestana:hover, .rd-pestana:focus-visible { opacity: 1; }
.rd-pestana[aria-current="page"] { opacity: 1; text-shadow: 0 0 14px rgba(212, 245, 123, .55)/*tema:fijo*/; }
.rd-pestana[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 999px; background: var(--rd-lima); box-shadow: var(--rd-punto-brillo);
}

/* Fondo y Perfil: botones redondos de 44 px */
.rd-acciones { justify-self: end; display: flex; align-items: center; gap: 8px; }
.rd-barra .rd-redondo {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: var(--rd-suave); color: var(--ink);
}
.rd-barra .rd-redondo:hover { background: var(--rd-suave); }
/* Perfil activo: círculo lleno lima, como .redondo.activo de perfil-plantilla.html */
.rd-barra .rd-redondo[aria-current="page"], .rd-barra .rd-redondo[aria-current="page"]:hover { background: var(--accent); color: var(--accent-ink); }
.rd-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.rd-tabs { display: none; }
/* Un solo nav.rd-tabs persistente fuera de #app (rd-nav.js): oculto en las vistas sin marco */
.rd-tabs[hidden] { display: none !important; }

/* Con rd-nav activo, la única entrada es la de rd-nav.js (opacidad en body y blur en #app): se anulan las entradas viejas
   de ultra.css/ultra.js (.u-page-enter) y de animaciones.css (html.transicion), sin borrarlas. */
html.rd-nav .u-page-enter { animation: none; }
html.rd-nav.transicion #app > .vista, html.rd-nav.transicion #app > .ensayo { animation: none; }

@media (max-width: 760px) {
  :root { --alto-barra: 56px; }
  .rd-barra { grid-template-columns: 1fr auto; }
  .rd-pestanas { display: none; }
  .rd-marca .u-logo > svg { width: clamp(112px, 32vw, 140px); }
  /* Pestañas de abajo con el área segura del iPhone */
  .rd-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0 0; z-index: 60;
    height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 4px 8px env(safe-area-inset-bottom, 0px);
    background: var(--rd-tabs); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  }
  .rd-tab {
    display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 48px; padding: 0;
    border: 0; border-radius: 12px; background: none; color: var(--ink-2);
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .rd-tab .rd-ico { width: 24px; height: 24px; }
  .rd-tab[aria-current="page"] { color: var(--accent-text); }
}

@media print {
  .rd-barra, .rd-tabs, .u-tema, .rd-perfil { display: none !important; }
}