/* ════════════════════════════════════════════════════════════════
   Alpha Finance — Learning Panel (Income Statement)
   Estilos clonados 1:1 de explicacion.css, scoped con prefijo lpx-
   para no chocar con financial.css.
   ════════════════════════════════════════════════════════════════ */

.lpx-overlay, .lpx-panel {
  --azul-oscuro: #285260;
  --azul-medio:  #548C92;
  --azul-claro:  #B4D7D8;
  --radio:       14px;
  --sombra:      0 4px 18px rgba(40,82,96,0.09);
}

/* ── Botón "?" en la tabla (el ? va en ::before → no contamina
      innerText y por tanto no aparece en el CSV export) ── */
.lpx-qbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  margin-left:7px;
  border-radius:50%;
  border:1.5px solid #548C92;
  background:#fff;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  vertical-align:middle;
  position:relative;
  top:-1px;
  transition:background-color .15s ease, transform .1s ease;
}
.lpx-qbtn::before{
  content:"?";
  font-size:11px;
  font-weight:700;
  color:#548C92;
  line-height:1;
}
.lpx-qbtn:hover{
  background:#548C92;
  transform:scale(1.08);
}
.lpx-qbtn:hover::before{color:#fff}

/* ── Overlay blanco blurry sobre la página ── */
.lpx-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.lpx-overlay.lpx-open{opacity:1;pointer-events:auto}

/* ── Panel lateral derecho ── */
.lpx-panel{
  position:fixed;
  top:0;right:0;bottom:0;
  z-index:9999;
  width:min(490px,94vw);
  background:#fff;
  box-shadow:-10px 0 40px rgba(40,82,96,.16);
  transform:translateX(105%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  font-family:inherit;
}
.lpx-panel.lpx-open{transform:translateX(0)}

/* Header */
.lpx-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px 13px;
  border-bottom:2px solid var(--azul-claro);
  flex:0 0 auto;
}
.lpx-head-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.lpx-head-title img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.lpx-head-title h3{
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.3px;
  color:var(--azul-oscuro);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lpx-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lpx-academy{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border:1.5px solid var(--azul-claro);
  border-radius:20px;
  background:#fff;
  color:var(--azul-oscuro);
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lpx-academy img{
  width:14px;height:14px;
  object-fit:contain;
  transition:filter .15s ease;
}
.lpx-academy:hover{
  background:var(--azul-medio);
  color:#fff;
  border-color:var(--azul-medio);
  box-shadow:0 3px 10px rgba(84,140,146,.35);
}
.lpx-academy:hover img{
  filter:brightness(0) invert(1);
}
.lpx-close{
  width:32px;height:32px;
  border-radius:50%;
  border:1.5px solid var(--azul-claro);
  background:#fff;
  color:var(--azul-oscuro);
  font-size:14px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s ease;
}
.lpx-close:hover{background:#f6fbfb}

/* Cuerpo scrolleable */
.lpx-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:#fdfefe;
}
.lpx-body::-webkit-scrollbar{width:8px}
.lpx-body::-webkit-scrollbar-thumb{background:var(--azul-claro);border-radius:10px}
.lpx-body::-webkit-scrollbar-track{background:transparent}

/* ── Caja (clon de .caja) ── */
.lpx-caja{
  position:relative;
  background:#fff;
  border-radius:var(--radio);
  padding:18px 20px;
  box-shadow:var(--sombra);
  border:1px solid rgba(84,140,146,0.1);
}

/* ── Título de sección (clon de .tituloSeccion) ── */
.lpx-tituloSeccion{
  margin:0 0 14px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--azul-medio);
  padding-bottom:10px;
  border-bottom:2px solid var(--azul-claro);
}

/* ── Badge TTM (clon de .mrqBadge) ── */
.lpx-mrqBadge{
  display:inline-block;
  margin-left:6px;
  background:var(--azul-claro);
  color:var(--azul-oscuro);
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  padding:2px 7px;
  border-radius:20px;
  vertical-align:middle;
  text-transform:uppercase;
}

/* ── Fórmula (clon de .formulaEcuacion / .formulaTermino / .formulaX) ── */
.lpx-formulaEcuacion{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  background:#f6fbfb;
  border:1px solid var(--azul-claro);
  border-radius:10px;
  padding:14px 16px;
  width:fit-content;
  max-width:100%;
}
.lpx-formulaNombre{
  font-size:15px;
  font-weight:700;
  color:var(--azul-oscuro);
  white-space:nowrap;
}
.lpx-formulaIgual{
  font-size:24px;
  color:#bbb;
  font-weight:300;
  line-height:1;
}
.lpx-formulaTermino{
  font-size:13.5px;
  font-weight:700;
  color:var(--azul-oscuro);
  padding:6px 12px;
  background:rgba(84,140,146,0.07);
  border-radius:8px;
  border:1px solid rgba(84,140,146,0.18);
  white-space:nowrap;
}
.lpx-formulaX{
  font-size:19px;
  font-weight:700;
  color:var(--azul-medio);
  line-height:1;
}
.lpx-formulaDesc{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lpx-formulaDesc li{
  font-size:13px;
  color:#555;
  padding-left:14px;
  position:relative;
  line-height:1.5;
}
.lpx-formulaDesc li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--azul-medio);
  font-size:16px;
}
.lpx-formulaDesc b{color:var(--azul-oscuro)}
.lpx-formulaNote{
  margin:10px 0 0;
  font-size:11.5px;
  color:#8a9aa0;
  line-height:1.45;
}

/* ── Identidad empresa dentro del panel ── */
.lpx-empresa{
  display:flex;
  align-items:center;
  gap:10px;
  background:#f6fbfb;
  border:1px solid var(--azul-claro);
  border-radius:10px;
  padding:9px 12px;
  margin-bottom:12px;
}
.lpx-empresa img{
  width:30px;height:30px;
  object-fit:contain;
  border-radius:6px;
  background:#fff;
  flex-shrink:0;
}
.lpx-empresa-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.lpx-empresa-nombre{
  font-size:13.5px;
  font-weight:700;
  color:var(--azul-oscuro);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lpx-empresa-ticker{
  font-size:11.5px;
  color:var(--azul-medio);
  font-weight:600;
}

/* ── Current Value (clon de .valorActual*) ── */
.lpx-valorActualFila{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:4px 0;
}
.lpx-valorActualLabel{font-size:13px;color:#666;font-weight:500}
.lpx-valorActualNum{
  font-size:15px;
  font-weight:700;
  color:var(--azul-oscuro);
  white-space:nowrap;
}
.lpx-valorActualNum.lpx-neg{color:#d93025}
.lpx-valorActualDivisor{
  width:100%;
  height:1.5px;
  background:var(--azul-claro);
  border-radius:2px;
  margin:4px 0;
}
.lpx-valorActualResultado{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f6fbfb;
  border:1px solid var(--azul-claro);
  border-radius:10px;
  padding:12px 14px;
  margin-top:10px;
  gap:8px;
  flex-wrap:wrap;
}
.lpx-valorActualResultLabel{
  font-size:12px;
  font-weight:700;
  color:var(--azul-oscuro);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.lpx-valorActualResultNum{
  font-size:24px;
  font-weight:800;
  color:var(--azul-oscuro);
  line-height:1;
}
.lpx-valorActualResultNum.lpx-neg{color:#d93025}

/* ── Definición (clon de .textoDefinicion) ── */
.lpx-textoDefinicion{
  margin:0;
  font-size:14px;
  color:#444;
  line-height:1.7;
  text-align:justify;
}
.lpx-textoDefinicion b{color:var(--azul-oscuro)}

/* ── Watermark (clon de .formulaWatermark) ── */
.lpx-watermark{
  position:absolute;
  bottom:10px;
  right:14px;
  display:flex;
  align-items:center;
  gap:6px;
  opacity:.22;
  pointer-events:none;
  user-select:none;
}
.lpx-watermark img{width:26px;height:26px;object-fit:contain}
.lpx-watermark span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--azul-oscuro);
}
/* espacio extra para que el watermark no tape texto */
.lpx-caja.lpx-conWatermark{padding-bottom:34px}

/* Bloquear scroll del fondo */
body.lpx-lock{overflow:hidden}

/* Móvil */
@media(max-width:560px){
  .lpx-panel{width:100vw}
  .lpx-head{padding:13px 14px 11px}
  .lpx-body{padding:13px 14px 20px}
  .lpx-academy span{display:none}
  .lpx-formulaEcuacion{gap:8px;padding:12px 13px}
  .lpx-formulaTermino{font-size:12.5px;padding:5px 10px}
}

@media(prefers-reduced-motion:reduce){
  .lpx-panel,.lpx-overlay,.lpx-qbtn{transition:none}
}