/*
 * ATMA Black · la puerta (25-oct-2026, Pedro: "colocar algo que diga quiero
 * iniciar sesión ATMA Black [...] muy pronto, pero que se vea muy bueno,
 * luxury"). Una píldora negra junto al sol y Mi cuenta, y una ventana negra
 * que anuncia la entrada. La interfaz de ATMA Black todavía no existe.
 *
 * Negro en los dos modos a propósito: por eso va después de tema-claro.css.
 * Sin dorado (Pedro lo rechazó en la piel FRQNCY): plata y la luz de ATMA.
 */

@property --bk-giro{ syntax:'<angle>'; inherits:false; initial-value:0deg }

:root{
  --bk-negro:#030305;
  --bk-plata:linear-gradient(100deg,#8e8e9c 0%,#f4f4f8 38%,#b9b9c6 55%,#ffffff 72%,#8e8e9c 100%);
  --bk-aro:conic-gradient(from var(--bk-giro),
    rgba(255,255,255,.06) 0deg, rgba(244,244,248,.55) 50deg, rgba(122,78,255,.55) 120deg,
    rgba(63,208,200,.5) 190deg, rgba(255,255,255,.06) 260deg, rgba(244,244,248,.35) 320deg, rgba(255,255,255,.06) 360deg);
}

/* ── La píldora de la barra ─────────────────────────────────────────────── */
.bk-pildora{
  position:relative; isolation:isolate; overflow:hidden;
  height:34px; padding:0 6px 0 5px; margin-right:6px;
  display:inline-flex; align-items:center; gap:9px;
  border-radius:99px; border:1px solid transparent; cursor:pointer;
  background:
    radial-gradient(120% 140% at 50% -40%, rgba(244,244,248,.10), transparent 60%) padding-box,
    linear-gradient(var(--bk-negro), var(--bk-negro)) padding-box,
    var(--bk-aro) border-box;
  box-shadow:0 6px 22px -10px rgba(122,78,255,.55), 0 0 0 1px rgba(0,0,0,.6);
  color:#f4f4f8; white-space:nowrap;
  animation:bk-girar 9s linear infinite;
  transition:transform .35s var(--curva-lx, ease), box-shadow .35s;
}
.bk-pildora:hover{ transform:translateY(-1px); box-shadow:0 10px 28px -10px rgba(122,78,255,.75), 0 0 0 1px rgba(0,0,0,.6) }
.bk-pildora:focus-visible{ outline:2px solid rgba(63,208,200,.7); outline-offset:3px }
/* El destello que cruza la píldora cada tanto. */
.bk-pildora::after{
  content:''; position:absolute; inset:-1px auto -1px -40%; width:38%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg); animation:bk-destello 6.5s var(--curva-lx, ease) infinite;
}
.bk-sello{
  width:24px; height:24px; flex:0 0 auto; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:300; font-size:11px; line-height:1; color:#fff;
  background:radial-gradient(circle at 30% 25%, #2a2a33, #050507 70%);
  box-shadow:inset 0 0 0 1px rgba(244,244,248,.28), 0 0 12px rgba(122,78,255,.35);
}
.bk-quiero{
  font-family:var(--texto); font-weight:400; font-size:11.5px; letter-spacing:.02em; color:rgba(233,233,242,.62);
}
.bk-marca{ display:inline-flex; align-items:baseline; gap:.5em }
.bk-atma, .bk-black{
  font-family:var(--display); font-weight:400; font-size:11px; letter-spacing:.3em; line-height:1;
  background:var(--bk-plata); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:bk-plata 7s ease-in-out infinite;
}
.bk-atma{ font-weight:300 }
.bk-black{ font-weight:600; margin-right:-.3em }
.bk-pronto{
  margin-left:3px; padding:4px 9px 4px 8px; border-radius:99px;
  font-family:var(--texto); font-weight:500; font-size:9px; letter-spacing:.2em; text-transform:uppercase; line-height:1;
  color:rgba(244,244,248,.82); background:rgba(244,244,248,.06); box-shadow:inset 0 0 0 1px rgba(244,244,248,.14);
}
.bk-pronto::before{
  content:''; display:inline-block; width:5px; height:5px; margin-right:6px; vertical-align:1px; border-radius:99px;
  background:#3FD0C8; box-shadow:0 0 8px #3FD0C8; animation:bk-latido 2.4s ease-in-out infinite;
}
/* La etiqueta "Nuevo" (novedades.css) aquí es un punto, como en los atajos. */
.bk-pildora .nv-punto{ top:2px; left:auto; right:2px; z-index:2 }

@media (max-width: 860px){
  /* En el celular la barra ya muestra ΛTMΛ y el nombre de la pantalla: con
     "BLACK" se recortaban Programas, Comunidad y Mi cuenta. Queda una moneda
     negra con el Λ, del tamaño de los otros atajos; la ventana dice el resto. */
  .bk-pildora{ width:32px; height:32px; padding:0; margin-right:0; justify-content:center }
  .bk-quiero, .bk-pronto, .bk-marca{ display:none }
  .bk-sello{ width:26px; height:26px; font-size:11.5px }
  .bk-pildora .nv-punto{ top:-1px; right:-1px }
}

/* ── La ventana ─────────────────────────────────────────────────────────── */
.bk-ventana{
  width:min(460px, calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px);
  padding:0; margin:auto; border:0; background:transparent; color:#f4f4f8; overflow:visible;
}
.bk-ventana::backdrop{ background:rgba(2,2,4,.74); backdrop-filter:blur(10px) saturate(.8); -webkit-backdrop-filter:blur(10px) saturate(.8) }
[data-tema="claro"] .bk-ventana::backdrop{ background:rgba(12,10,22,.55) }
.bk-ventana[open]{ animation:bk-entrar .7s var(--curva-lx, ease) both }
.bk-ventana[open]::backdrop{ animation:bk-velo .5s ease both }

.bk-tarjeta{
  position:relative; isolation:isolate; overflow:hidden; text-align:center;
  padding:56px 36px 30px; border-radius:24px; border:1px solid transparent;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(122,78,255,.20), transparent 70%) padding-box,
    radial-gradient(60% 40% at 50% 100%, rgba(63,208,200,.07), transparent 70%) padding-box,
    linear-gradient(180deg, #08080c, var(--bk-negro) 60%) padding-box,
    var(--bk-aro) border-box;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9), 0 0 80px -30px rgba(122,78,255,.45);
  animation:bk-girar 12s linear infinite;
}
/* El haz de luz de la entrada (entrada-haz.css), aquí en plata. */
.bk-haz{
  position:absolute; top:0; left:50%; width:1px; height:74px; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(244,244,248,.85) 55%, transparent);
  box-shadow:0 0 18px 2px rgba(185,165,255,.45);
}
.bk-haz::after{
  content:''; position:absolute; left:50%; top:62px; width:180px; height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(244,244,248,.4), transparent);
}
.bk-cerrar{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:99px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:transparent; border:1px solid rgba(244,244,248,.12); color:rgba(244,244,248,.6);
  transition:color .2s, border-color .2s;
}
.bk-cerrar:hover{ color:#fff; border-color:rgba(244,244,248,.35) }
.bk-cerrar svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round }

.bk-rotulo{
  margin:18px 0 0; font-family:var(--texto); font-weight:500; font-size:10.5px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(233,233,242,.5);
}
.bk-titulo{ margin:18px 0 0; display:flex; flex-direction:column; align-items:center; gap:14px; line-height:1 }
.bk-titulo-atma{
  font-family:var(--display); font-weight:200; font-size:clamp(38px, 11vw, 52px); letter-spacing:.42em; margin-right:-.42em;
  background:var(--bk-plata); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(185,165,255,.25)); animation:bk-plata 8s ease-in-out infinite;
}
.bk-titulo-black{
  font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:1.05em; margin-right:-1.05em; color:#fff;
}
.bk-chip{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px; padding:7px 14px; border-radius:99px;
  font-family:var(--texto); font-weight:500; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(244,244,248,.88); background:rgba(244,244,248,.05); box-shadow:inset 0 0 0 1px rgba(244,244,248,.14);
}
.bk-chip i{ width:6px; height:6px; border-radius:99px; background:#3FD0C8; box-shadow:0 0 10px #3FD0C8; animation:bk-latido 2.4s ease-in-out infinite }
.bk-texto{
  max-width:330px; margin:22px auto 0; font-family:var(--texto); font-weight:300; font-size:15px; line-height:1.6;
  color:rgba(233,233,242,.82); text-wrap:balance;
}
.bk-texto + .bk-texto{ margin-top:8px; font-size:13.5px; color:rgba(233,233,242,.55) }
.bk-entrar{
  width:100%; height:50px; margin-top:28px; border-radius:99px; cursor:not-allowed;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--texto); font-weight:500; font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(244,244,248,.55); background:rgba(244,244,248,.03); border:1px solid rgba(244,244,248,.14);
}
.bk-entrar svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.bk-pie{
  margin:18px 0 0; font-family:var(--texto); font-weight:400; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(233,233,242,.34);
}
@media (max-width: 480px){
  .bk-tarjeta{ padding:52px 22px 26px }
  .bk-titulo-black{ letter-spacing:.9em; margin-right:-.9em }
  .bk-pie{ letter-spacing:.16em }
}

/* ── Movimiento ─────────────────────────────────────────────────────────── */
@keyframes bk-girar{ to{ --bk-giro:360deg } }
@keyframes bk-destello{ 0%, 62%{ left:-40% } 100%{ left:130% } }
@keyframes bk-plata{ 0%, 100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
@keyframes bk-latido{ 0%, 100%{ opacity:1 } 50%{ opacity:.35 } }
@keyframes bk-entrar{ from{ opacity:0; transform:translateY(14px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes bk-velo{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .bk-pildora, .bk-pildora::after, .bk-atma, .bk-black, .bk-pronto::before,
  .bk-tarjeta, .bk-titulo-atma, .bk-chip i, .bk-ventana[open], .bk-ventana[open]::backdrop{ animation:none }
  .bk-pildora::after{ display:none }
}