/* 00. Tokens */
:root{--ul-color:oklch(70% 0.25 345);--ul-thickness:2px;--ul-offset:-1px;--ul-in:.35s;--ul-out:.20s;--learn-bg:#0f172a;--learn-fg:#e5e7eb;--learn-muted:#9aa4b2;--learn-line:#22324a;--learn-rad:12px;--learn-shadow:0 8px 22px rgba(0,0,0,.18);--learn-z:12000;--learn-action-size:24px;--learn-action-radius:50%;--learn-action-hover-bg:color-mix(in oklch,var(--learn-bg) 86%,white 14%);}

/* 01. Trigger / Subrayado */
[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][data-learn-active]{cursor:pointer;}

.learn-on [data-learn][data-learn-active]::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;}}

/* 02. 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;overflow:visible;isolation:isolate;user-select:text;}

.learn-head{display:block;margin:0 0 4px;}

.learn-tip h4{margin:0;font-size:14px;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.4;}

/* 03. Acciones */
.learn-actions{display:inline-flex;gap:4px;align-items:center;}

.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;}

.learn-actions .learn-copy:hover,.learn-actions .learn-close:hover{background:var(--learn-action-hover-bg);color:var(--learn-fg);}

.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;}

.learn-actions .learn-copy svg,.learn-actions .learn-close svg{display:block;width:14px;height:14px;}

/* 04. Flecha / Legado */
.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);}

.learn-tip .learn-arrow,.learn-arrow{display:none !important;}

.learn-tip[data-variant="simple"]{--learn-shadow:0 6px 18px rgba(0,0,0,.14);max-width:240px;padding:9px 11px;border-radius:10px;}
.learn-tip[data-variant="simple"] .learn-head{margin:0;}
.learn-tip[data-variant="simple"] h4{font-size:12px;line-height:1.1;font-weight:550;}
.learn-tip[data-variant="simple"] p{display:none;}
.learn-tip[data-variant="simple"]::after{width:10px;height:10px;}

/* 05. CTA "Ver definición" — link al ancla del término en /glosario */
.learn-tip__cta{display:inline-block;margin-top:10px;font-size:13px;line-height:1.2;color:var(--ul-color);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .15s ease;}
.learn-tip__cta[hidden]{display:none;}

/* 06. Toggle en resultados — botón para encender/apagar el modo */
.btn-learn-toggle:not(.vista-btn){appearance:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--separator,#e6eaf0);background:transparent;color:var(--label,#0f1422);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;padding:0;}
.btn-learn-toggle:not(.vista-btn):hover{background:color-mix(in srgb,var(--brand) 10%,transparent);border-color:color-mix(in srgb,var(--brand) 40%,transparent);color:var(--brand);}
.btn-learn-toggle:not(.vista-btn):active{transform:scale(.95);}
.btn-learn-toggle:not(.vista-btn)[aria-pressed="true"]{background:var(--ul-color);border-color:var(--ul-color);color:#fff;}
.btn-learn-toggle:not(.vista-btn)[aria-pressed="true"]:hover{filter:brightness(.95);}
.btn-learn-toggle [data-lucide],.btn-learn-toggle svg{width:18px;height:18px;display:block;stroke-width:1.75;}
.learn-tip__cta:hover,.learn-tip__cta:focus-visible{border-bottom-color:var(--ul-color);outline:none;}
.learn-tip[data-variant="simple"] .learn-tip__cta{display:none;}