/* premium-lock.css — el único aviso de Premium del sitio (cuenta free o sin sesión).
   Lo carga cada página después de su propio CSS. Estilo sobrio: gris claro, candado, sin
   animaciones ni dorado. Además de la tarjeta, aquí se pinta igual todo lo que ya existía por
   página (píldoras «Unlock …», tooltip «Upgrade to Premium», zona bloqueada del slider, botones
   con candado), por eso esas reglas van con !important: el CSS de cada página las declaraba en
   dorado con selectores muy específicos.

   Tarjeta en línea (sustituye a un botón o a un bloque que no se puede usar):
     <div class="af-pl">
       <span class="af-pl__icon"></span>
       <span class="af-pl__text">
         <span class="af-pl__eyebrow">Premium</span>
         <span class="af-pl__title">Unlock …</span>
       </span>
       <button class="af-pl__btn">Start free trial</button>
     </div>
   Tarjeta centrada encima de una gráfica o tabla difuminada: .af-pl.af-pl--stack (con
   .af-pl__sub opcional) dentro de .af-pl-overlay, que cubre al padre (position:relative). */

:root {
  --pl-ink: #1E2B31;
  --pl-text: #2C4A55;
  --pl-muted: #5F6B70;
  --pl-bg: #F4F7F8;
  --pl-chip: #EAF0F1;
  --pl-line: #D9E2E5;
  --pl-btn: #1E3A44;
  --pl-btn-hover: #285260;
  --pl-excel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='10' y='4' width='19' height='24' rx='2' fill='%2321A366'/%3E%3Cpath d='M19.5 4H27a2 2 0 0 1 2 2v6h-9.5z' fill='%2333C481'/%3E%3Cpath d='M19.5 12H29v8h-9.5z' fill='%23107C41'/%3E%3Cpath d='M10 20h19v6a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2z' fill='%23185C37'/%3E%3Crect x='3' y='9' width='14' height='14' rx='2' fill='%23107C41'/%3E%3Cpath d='M6.6 12.5h2.4l1.6 2.9 1.6-2.9h2.3l-2.6 3.9 2.7 4.1h-2.4l-1.7-3-1.7 3H6.5l2.7-4.1z' fill='%23fff'/%3E%3C/svg%3E");
  --pl-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4A55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

/* ============ Tarjeta ============ */
.af-pl {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--pl-line);
  background: var(--pl-bg);
  position: relative;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  text-align: left;
  line-height: 1.3;
}

.af-pl .af-pl__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--pl-line);
  background: #fff var(--pl-lock) center / 14px no-repeat;
}

.af-pl .af-pl__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}
.af-pl .af-pl__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-muted);
}
.af-pl .af-pl__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pl-ink);
}
.af-pl .af-pl__sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--pl-muted);
}

.af-pl .af-pl__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 15px;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--pl-btn) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.15s ease;
}
.af-pl .af-pl__btn:hover { background: var(--pl-btn-hover) !important; }

/* Enlace secundario debajo del botón (p. ej. Academy: «Watch the free module first») */
.af-pl .af-pl__link {
  font-size: 12px;
  font-weight: 600;
  color: var(--pl-text) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Variante centrada (encima de gráficas, tablas y el reproductor de la Academy) */
.af-pl--stack {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
  width: auto;
  max-width: 340px;
  padding: 18px 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(22, 36, 42, 0.10);
}
.af-pl--stack .af-pl__icon { width: 38px; height: 38px; background-size: 17px; }
.af-pl--stack .af-pl__text { align-items: center; gap: 3px; }
.af-pl--stack .af-pl__title { font-size: 15px; font-weight: 700; }

/* Versión chica (gráficas pequeñas, p. ej. el donut de Owners) */
.af-pl--mini { padding: 12px 14px; gap: 7px; border-radius: 12px; }
.af-pl--mini .af-pl__icon { width: 30px; height: 30px; background-size: 14px; }
.af-pl--mini .af-pl__title { font-size: 12.5px; }
.af-pl--mini .af-pl__btn { padding: 6px 12px; font-size: 11.5px; }

/* Capa que tapa una gráfica o tabla bloqueada y centra la tarjeta */
.af-pl-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* Mensajes cortos en línea (Save, alertas) */
.af-pl-msg,
.af-save__state--premium,
.af-alert__msg--premium { color: var(--pl-text) !important; font-weight: 600; }
.af-pl-msg a { color: var(--pl-text); text-decoration: underline; }

/* ============ Valor bloqueado: blur, sin píldoras ============
   Un solo estilo en todo el sitio (el del puente del DCF): el valor se ve difuminado, sin la
   píldora «Unlock …» encima. Debajo hay números falsos (utils/blocker.js), así que el texto se
   deja ver. Los :not(#…) suben la especificidad por encima de las reglas de cada página, que
   ponían color transparente, quitaban el blur y dibujaban la píldora en ::before. */
body:not([data-premium="1"]) [data-lock="premium"]:not(#af-pl-a):not(#af-pl-b):not(#af-pl-c) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  filter: blur(7px) !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: pointer !important;
  background-image: none !important;
  min-width: 2.5em;
}
body:not([data-premium="1"]) canvas[data-lock="premium"]:not(#af-pl-a):not(#af-pl-b):not(#af-pl-c) { min-width: 0; }
body:not([data-premium="1"]) [data-lock="premium"]:not(#af-pl-a):not(#af-pl-b):not(#af-pl-c)::before,
body:not([data-premium="1"]) [data-lock="premium"]:not(#af-pl-a):not(#af-pl-b):not(#af-pl-c)::after {
  content: none !important;
  display: none !important;
}
.blk-overlay::after { content: none !important; }

/* Una sola invitación por pestaña, debajo de la tarjeta de resultado (la pone blocker.js) */
.af-lock-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 12px auto 4px;
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--pl-line);
  background: #fff;
  color: var(--pl-text) !important;
  font: 600 13px/1.2 'Inter', sans-serif;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(22, 36, 42, 0.06);
  cursor: pointer;
}
.af-lock-cta__ico { width: 12px; height: 12px; background: var(--pl-lock) center / contain no-repeat; flex-shrink: 0; }
.af-lock-cta b {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--pl-btn);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.af-lock-cta:hover b { background: var(--pl-btn-hover); }
body[data-premium="1"] .af-lock-cta { display: none; }

/* ============ Tooltip «Upgrade to Premium» ============ */
.premium-upgrade-tooltip,
.slider-zone-tooltip {
  background: var(--pl-ink) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(22, 36, 42, 0.18) !important;
  animation: none !important;
}
.premium-upgrade-tooltip::after,
.slider-zone-tooltip::after { border-top-color: var(--pl-ink) !important; }

/* ============ Zona bloqueada del slider (Financials) ============ */
.slider-locked-zone {
  background: repeating-linear-gradient(135deg, #EEF2F3 0 6px, #F7F9FA 6px 12px) !important;
  border-right: 2px dashed #C3D0D4 !important;
}
.slider-locked-zone::before { display: none !important; }
.slider-locked-zone:hover { background: repeating-linear-gradient(135deg, #E6ECEE 0 6px, #F2F5F6 6px 12px) !important; }
.slider-locked-zone__label {
  background: #fff var(--pl-lock) 8px center / 10px no-repeat !important;
  color: var(--pl-text) !important;
  border: 1px solid var(--pl-line) !important;
  padding-left: 21px !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ============ Botones bloqueados ============
   Export to Excel, Export all to Excel y los rangos de Historical: blanco, borde gris, candado. */
.af-xlsx.is-locked,
.af-allfs.is-locked,
.af-save__btn.is-locked,
.botonTimeframe.tf-gold-locked:not(#af-pl-a):not(#af-pl-b) {
  background: #fff !important;
  color: var(--pl-muted) !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: none !important;
  animation: none !important;
  font-weight: 600 !important;
}
.af-xlsx.is-locked:hover,
.af-allfs.is-locked:hover,
.af-save__btn.is-locked:hover,
.botonTimeframe.tf-gold-locked:not(#af-pl-a):not(#af-pl-b):hover {
  background: var(--pl-bg) !important;
  color: var(--pl-text) !important;
}
.af-xlsx.is-locked .fa-file-excel,
.af-allfs.is-locked .fa-file-excel { color: #1d6f42 !important; }
.af-save__lock { display: none; }
.af-save__btn.is-locked .af-save__lock { display: inline-block; }
.af-xlsx__lock,
.af-save__lock,
.af-allfs__lock,
.af-allfs:hover .af-allfs__lock { color: var(--pl-text) !important; }
.botonTimeframe.tf-gold-locked:not(#af-pl-a):not(#af-pl-b)::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  vertical-align: -1px;
  background: var(--pl-lock) center / contain no-repeat;
}

/* ============ Descargas a Excel bloqueadas: el logo de Excel bien visible ============ */
/* Tarjeta: logo de Excel en vez del candado, y el candado chico en la esquina */
.af-pl--excel .af-pl__icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff var(--pl-excel) center / 24px no-repeat;
}
.af-pl--excel .af-pl__icon::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--pl-line);
  background: #fff var(--pl-lock) center / 9px no-repeat;
}
/* Botones (Export to Excel, Export all to Excel): el ícono pasa a ser el logo de Excel */
.af-xlsx.is-locked .fa-file-excel::before,
.af-allfs.is-locked .fa-file-excel::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  background: var(--pl-excel) center / contain no-repeat;
}

/* ============ Etiquetas Premium de la Academy ============ */
.ac-access--premium { background: var(--pl-chip) !important; color: var(--pl-text) !important; }
.ac-access--premium i { color: var(--pl-text) !important; }
.m-lesson__gate--premium,
.m-lesson .m-lesson__num--premium { color: var(--pl-text) !important; }

@media (max-width: 520px) {
  .af-pl:not(.af-pl--stack) { flex-wrap: wrap; width: 100%; }
  .af-pl:not(.af-pl--stack) .af-pl__btn { width: 100%; }
  .af-pl--stack { padding: 16px; }
}