/* ===============================
   aprender.css — producción (final unificado)
   =============================== */

/* Tokens */
:root{
  /* Underline sólido */
  --ul-color: oklch(70% 0.25 345);
  --ul-thickness: 3px;
  --ul-offset: -1px;
  --ul-in: .35s;
  --ul-out: .20s;

  /* Tooltip */
  --learn-bg:#0f172a;
  --learn-fg:#e5e7eb;
  --learn-muted:#9aa4b2;
  --learn-line:#22324a;
  --learn-rad:12px;
  --learn-shadow:0 18px 48px rgba(0,0,0,.35);
  --learn-z:2000;

  /* Acciones (misma caja para copiar/cerrar) */
  --learn-action-size:24px;
  --learn-action-radius:6px;
  --learn-action-hover-bg: color-mix(in oklch, var(--learn-bg) 86%, white 14%);
}

/* ===== Subrayado animado ===== */
[data-learn]{ position:relative; text-decoration:none; }
[data-learn]::after{
  content:""; position:absolute; left:0; right:0; bottom:var(--ul-offset);
  height:var(--ul-thickness); background:var(--ul-color); pointer-events:none;
  transform:scaleX(0); transform-origin:left; transition:transform var(--ul-in) ease;
}
.learn-on [data-learn]{ cursor:pointer; }
.learn-on [data-learn]::after{ transform:scaleX(1); transform-origin:left; }
.learn-closing [data-learn]::after{ transform:scaleX(0); transform-origin:right; transition-duration:var(--ul-out); }
@media (prefers-reduced-motion:reduce){ [data-learn]::after{ transition:none; } }

/* ===== Tooltip base ===== */
.learn-tip{
  position:fixed; z-index:var(--learn-z); max-width:360px;
  background:var(--learn-bg); color:var(--learn-fg);
  border:1px solid var(--learn-line); border-radius:var(--learn-rad);
  box-shadow:var(--learn-shadow); padding:12px 12px 12px;
  overflow:visible; isolation:isolate; user-select:text;
}

/* Header: título + acciones */
.learn-head{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:8px; margin:0 0 4px; /* compacto */
}
.learn-tip h4{ margin:0; font-size:15px; line-height:1.25; font-weight:600; color:var(--learn-fg); }
.learn-tip p{ margin:2px 0 0; color:var(--learn-muted); font-size:14px; line-height:1.5; }

/* Acciones — COPIAR y CERRAR comparten EXACTAMENTE la misma caja/hover */
.learn-actions{ display:inline-flex; gap:4px; align-items:center; }

/* Neutraliza estilos legacy y unifica */
.learn-actions .learn-copy,
.learn-actions .learn-close{
  all:unset;
  box-sizing:border-box;
  display:inline-grid; place-items:center;
  width:var(--learn-action-size); height:var(--learn-action-size);
  border-radius:var(--learn-action-radius);
  color:var(--learn-muted);
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}

/* MISMO HOVER para ambos */
.learn-actions .learn-copy:hover,
.learn-actions .learn-close:hover{
  background:var(--learn-action-hover-bg);
  color:var(--learn-fg);
}

/* Active & Focus idénticos */
.learn-actions .learn-copy:active,
.learn-actions .learn-close:active{ transform:scale(.96); }
.learn-actions .learn-copy:focus-visible,
.learn-actions .learn-close:focus-visible{
  outline:2px solid var(--ul-color);
  outline-offset:2px;
}

/* Íconos con mismo tamaño exacto */
.learn-actions .learn-copy svg,
.learn-actions .learn-close svg{
  display:block; width:14px; height:14px;
}

/* Flecha integrada */
.learn-tip::after{
  content:""; position:absolute; width:12px; height:12px; background:var(--learn-bg);
  transform:rotate(45deg); border-left:1px solid var(--learn-line); border-top:1px solid var(--learn-line);
  border-left-color:var(--learn-bg); border-top-color:var(--learn-bg); pointer-events:none; z-index:0;
}
.learn-tip[data-side="bottom"]::after{ top:-7px;    left:50%; transform:translateX(-50%) rotate(45deg); }
.learn-tip[data-side="top"]::after   { bottom:-7px; left:50%; transform:translateX(-50%) rotate(45deg); }
.learn-tip[data-side="right"]::after { left:-7px;   top:50%;  transform:translateY(-50%) rotate(45deg); }
.learn-tip[data-side="left"]::after  { right:-7px;  top:50%;  transform:translateY(-50%) rotate(45deg); }

/* Oculta flechas antiguas del DOM si existieran */
.learn-tip .learn-arrow, .learn-arrow{ display:none !important; }

/* ===== Scope primera tarjeta ===== */
.learn-on #planes-recomendados [data-learn]::after{ transform:scaleX(0); }
.learn-on #planes-recomendados [data-learn][data-learn-active]::after{ transform:scaleX(1); transform-origin:left; }
.learn-closing #planes-recomendados [data-learn][data-learn-active]::after{ transform:scaleX(0); transform-origin:right; transition-duration:var(--ul-out); }