@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --codex-ink:#171412;
  --codex-paper:#fbf8f6;
  --codex-white:#fffdfb;
  --codex-muted:#756a64;
  --codex-line:#dfd4ce;
  --codex-warm:#eee0d9;
}

.codex-global-topbar,
.codex-global-header,
.codex-global-footer,
.codex-global-topbar *,
.codex-global-header *,
.codex-global-footer *{box-sizing:border-box}

.codex-global-topbar{
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-bottom:1px solid var(--codex-line);
  background:var(--codex-paper);
  color:var(--codex-muted);
  font-family:Inter,Arial,sans-serif;
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.codex-global-header{
  position:relative;
  z-index:90;
  width:100%;
  background:rgba(255,253,251,.97);
  color:var(--codex-ink);
  border-bottom:1px solid var(--codex-line);
  font-family:Inter,Arial,sans-serif;
}

.codex-global-nav{
  min-height:76px;
  padding:0 4.5vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:28px;
  align-items:center;
}

.codex-global-who{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  overflow:hidden;
  color:var(--codex-muted);
  font-size:9px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.codex-global-who span{overflow:hidden;text-overflow:ellipsis}
.codex-global-who small{font:inherit;opacity:.75}

.codex-global-center{text-align:center;line-height:1}
.codex-global-brand{
  display:block;
  color:inherit;
  text-decoration:none;
  font-family:"Cormorant Garamond",serif;
  font-size:30px;
  font-weight:500;
  letter-spacing:.27em;
  text-transform:uppercase;
  white-space:nowrap;
}
.codex-global-section{
  margin-top:8px;
  color:var(--codex-muted);
  font-size:8px;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.codex-global-links{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:19px;
  min-width:0;
}
.codex-global-links a{
  position:relative;
  padding:8px 0;
  color:inherit;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:8px;
  white-space:nowrap;
  transition:opacity .18s ease;
}
.codex-global-links a:hover{opacity:.52}
.codex-global-links a.active:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:2px;
  height:1px;
  background:currentColor;
}

/* Optional home/hero mode: set $codex_nav_variant = 'overlay' before require. */
.codex-global-header.is-overlay{
  position:absolute;
  left:0;right:0;top:30px;
  background:transparent;
  color:#fff;
  border-bottom-color:rgba(255,255,255,.22);
  transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.codex-global-header.is-overlay.is-scrolled{
  position:fixed;
  top:0;
  background:rgba(255,253,251,.95);
  color:var(--codex-ink);
  border-bottom-color:var(--codex-line);
  backdrop-filter:blur(12px);
  box-shadow:0 5px 24px rgba(23,20,18,.05);
}

.codex-global-footer{
  margin:0;
  padding:0 4.5vw;
  border-top:1px solid var(--codex-line);
  background:var(--codex-paper);
  color:var(--codex-ink);
  font-family:Inter,Arial,sans-serif;
}
.codex-global-footer-main{
  min-height:132px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.codex-global-footer-brand{display:flex;flex-direction:column;gap:7px}
.codex-global-footer-brand strong{
  font-family:"Cormorant Garamond",serif;
  font-size:27px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.codex-global-footer-brand span{color:var(--codex-muted);font-size:10px}
.codex-global-footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:20px}
.codex-global-footer-links a{
  color:var(--codex-ink);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:8px;
}
.codex-global-footer-links a:hover{opacity:.55}
.codex-global-footer-bottom{
  min-height:58px;
  border-top:1px solid var(--codex-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:var(--codex-muted);
  font-size:9px;
}

@media(max-width:980px){
  .codex-global-nav{grid-template-columns:1fr auto;padding:0 24px}
  .codex-global-who{display:none}
  .codex-global-brand{font-size:26px}
  .codex-global-links{gap:13px}
}

@media(max-width:700px){
  .codex-global-topbar{height:26px;font-size:7px}
  .codex-global-header.is-overlay{top:26px}
  .codex-global-nav{min-height:72px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:11px 18px}
  .codex-global-brand{font-size:24px;letter-spacing:.2em}
  .codex-global-section{display:none}
  .codex-global-links{width:100%;justify-content:center;gap:13px;overflow-x:auto;scrollbar-width:none}
  .codex-global-links::-webkit-scrollbar{display:none}
  .codex-global-links a{font-size:7px}
  .codex-global-footer{padding:0 22px}
  .codex-global-footer-main{padding:30px 0;min-height:0;align-items:flex-start;flex-direction:column}
  .codex-global-footer-links{justify-content:flex-start}
  .codex-global-footer-bottom{padding:18px 0;min-height:0;align-items:flex-start;flex-direction:column}
}

/* v1.1 — sesión global heredada del Vault */
.codex-global-account{
  min-width:0;
  display:flex;
  align-items:center;
  gap:13px;
  font-family:Inter,Arial,sans-serif;
}
.codex-global-who{overflow:visible}
.codex-global-who a{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  color:inherit;
  text-decoration:none;
}
.codex-global-who a:hover{opacity:.58}
.codex-global-session-links{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:12px;
  border-left:1px solid var(--codex-line);
}
.codex-global-session-links a,
.codex-global-login{
  color:inherit;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:7px;
  white-space:nowrap;
}
.codex-global-session-links a:hover,
.codex-global-login:hover{opacity:.55}
.codex-global-login-wrap{display:flex;align-items:center}

@media(max-width:1180px){
  .codex-global-session-links a:first-child{display:none}
}
@media(max-width:980px){
  .codex-global-account{display:none}
}


/* v1.2 — local toolbars: page-specific controls live BELOW the global navbar */
.codex-local-toolbar{
  width:100%;
  border-bottom:1px solid var(--codex-line);
  background:var(--codex-white);
  font-family:Inter,Arial,sans-serif;
}
.codex-local-toolbar-inner{
  min-height:54px;
  padding:8px 4.5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.codex-local-toolbar-tabs,
.codex-local-toolbar-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:17px;
}
.codex-local-toolbar button,
.codex-local-toolbar a{
  border:0;
  background:none;
  color:var(--codex-ink);
  font:500 8px/1 Inter,Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}
.codex-local-toolbar button{padding:8px 0}
.codex-local-toolbar button.active{border-bottom:1px solid var(--codex-ink)}
.codex-local-toolbar a:hover,
.codex-local-toolbar button:hover{opacity:.56}
.codex-local-toolbar .codex-local-add{
  width:34px;height:34px;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--codex-line);
  border-radius:50%;
  font-size:17px;
}
@media(max-width:700px){
  .codex-local-toolbar-inner{padding:8px 18px;align-items:flex-start;flex-direction:column;gap:6px}
  .codex-local-toolbar-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .codex-local-toolbar-tabs::-webkit-scrollbar{display:none}
  .codex-local-toolbar-actions{width:100%;justify-content:space-between}
}

/* =========================================================
   QUICK TOOLS v1.1
   Global drawer for small utilities. Link Forge is tool 01.
   ========================================================= */
.codex-qtools-trigger{
  flex:0 0 auto;
  min-width:58px;
  height:28px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid currentColor;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font:500 7px/1 Inter,Arial,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.68;
  transition:opacity .18s ease,background .18s ease,color .18s ease;
}
.codex-qtools-trigger span{font-size:8px;line-height:1}
.codex-qtools-trigger:hover,
.codex-qtools-trigger[aria-expanded="true"]{opacity:1}

.codex-qtools-backdrop{
  position:fixed;
  inset:0;
  z-index:980;
  background:rgba(23,20,18,.12);
  backdrop-filter:blur(2px);
}
.codex-qtools-backdrop[hidden]{display:none}

.codex-qtools-panel,
.codex-qtools-panel *{box-sizing:border-box}
.codex-qtools-panel{
  position:fixed;
  z-index:990;
  top:122px;
  right:4.5vw;
  width:min(620px,calc(100vw - 28px));
  max-height:calc(100vh - 146px);
  overflow:auto;
  padding:25px;
  border:1px solid #d6c9c2;
  background:#fffdfb;
  color:#171412;
  box-shadow:0 24px 70px rgba(23,20,18,.16);
  font-family:Inter,Arial,sans-serif;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.985);
  transform-origin:top right;
  transition:opacity .16s ease,transform .16s ease,visibility .16s step-end;
}
.codex-qtools-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .16s ease,transform .16s ease,visibility 0s;
}
.codex-qtools-open{overflow:hidden}

.codex-qtools-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:19px;
  border-bottom:1px solid #dfd4ce;
}
.codex-qtools-kicker{
  margin:0 0 9px;
  color:#8f7265;
  font-size:8px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.codex-qtools-head h2{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:37px;
  font-weight:500;
  line-height:.95;
  letter-spacing:-.02em;
}
.codex-qtools-close{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  padding:0;
  border:1px solid #dfd4ce;
  border-radius:50%;
  background:transparent;
  color:#171412;
  font:300 19px/1 Arial,sans-serif;
  cursor:pointer;
}
.codex-qtools-close:hover{background:#f3ebe7}
.codex-qtools-intro{
  margin:18px 0 21px;
  color:#756a64;
  font-size:11px;
  line-height:1.65;
}

.codex-qtools-layout{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding-top:2px;
}
.codex-qtools-index{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.codex-qtool-switch{
  width:100%;
  min-height:68px;
  padding:11px 10px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  border:1px solid #dfd4ce;
  background:#fbf8f6;
  color:#756a64;
  text-align:left;
  cursor:pointer;
  transition:.16s ease;
}
.codex-qtool-switch:hover{border-color:#cbbab1;background:#f7efeb}
.codex-qtool-switch.is-active{border-color:#80675c;background:#eee0d9;color:#171412}
.codex-qtool-number{font:500 8px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.08em}
.codex-qtool-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.codex-qtool-copy strong{font:500 14px/1 "Cormorant Garamond",Georgia,serif}
.codex-qtool-copy small{font:500 7px/1.2 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.codex-qtool-arrow{font-size:12px;opacity:.45}
.codex-qtool-switch.is-active .codex-qtool-arrow{opacity:1}
.codex-qtool-view{display:none;min-width:0}
.codex-qtool-view.is-active{display:block}
.codex-qtool-viewhead{margin-bottom:18px;padding-bottom:15px;border-bottom:1px solid #e4dad5}
.codex-qtool-viewhead>span{display:block;margin-bottom:6px;color:#9b8276;font-size:7px;letter-spacing:.17em;text-transform:uppercase}
.codex-qtool-viewhead h3{margin:0;font:500 29px/.95 "Cormorant Garamond",Georgia,serif}
.codex-qtool-viewhead p{margin:8px 0 0;color:#81756f;font-size:9px;line-height:1.55}

.codex-qtools-label{
  display:block;
  margin:0 0 7px;
  color:#756a64;
  font-size:8px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.codex-qtools-input,
.codex-qtools-output{
  width:100%;
  border:1px solid #d7cbc5;
  border-radius:0;
  outline:0;
  background:#f8f3f0;
  color:#2a2421;
  font:11px/1.55 Inter,Arial,sans-serif;
}
.codex-qtools-input{min-height:74px;padding:11px 12px;resize:vertical}
.codex-qtools-input:focus,
.codex-qtools-output:focus{border-color:#a98a7b;box-shadow:0 0 0 2px rgba(169,138,123,.08)}
.codex-qtools-detect{
  min-height:38px;
  margin:10px 0 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 1px;
  color:#756a64;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.codex-qtools-provider{color:#4e433e;font-weight:600}
.codex-qtools-state{padding:5px 7px;border:1px solid #d7cbc5;background:#fbf8f6}
.codex-qtools-state.is-warning{color:#9a654f;border-color:#dbc0b3;background:#faf0eb}
.codex-qtools-outputrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.codex-qtools-output{height:42px;padding:0 11px;font-family:Consolas,monospace;font-size:10px}
.codex-qtools-copy-main{
  min-width:76px;
  border:1px solid #171412;
  background:#171412;
  color:#fff;
  font:600 8px/1 Inter,Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.codex-qtools-copy-main:disabled{opacity:.28;cursor:not-allowed}
.codex-qtools-note{min-height:33px;margin:10px 0 16px;color:#8a7e77;font-size:9px;line-height:1.55}
.codex-qtools-snippets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.codex-qtools-snippets button{
  min-height:35px;
  padding:7px 8px;
  border:1px solid #d7cbc5;
  background:transparent;
  color:#4f4743;
  font:500 8px/1.25 Inter,Arial,sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
}
.codex-qtools-snippets button:hover:not(:disabled){background:#f3ebe7;border-color:#cbbab1}
.codex-qtools-snippets button:disabled{opacity:.28;cursor:not-allowed}
.codex-qtools-foot{
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid #dfd4ce;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  color:#9a8d86;
  font-size:7px;
  line-height:1.6;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.codex-qtools-foot span{max-width:285px}
.codex-qtools-foot button{
  padding:0;border:0;background:none;color:#625650;
  font:600 7px/1 Inter,Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.codex-qtools-foot button:hover{opacity:.55}

@media(max-width:700px){
  .codex-qtools-trigger{height:24px;min-width:52px;padding:0 7px;font-size:6px}
  .codex-qtools-panel{
    top:auto;
    left:14px;
    right:14px;
    bottom:14px;
    width:auto;
    max-height:calc(100vh - 28px);
    padding:21px;
    transform:translateY(12px);
    transform-origin:bottom center;
  }
  .codex-qtools-head h2{font-size:33px}
  .codex-qtools-layout{grid-template-columns:1fr;gap:16px}
  .codex-qtools-index{display:grid;grid-template-columns:1fr}
  .codex-qtool-switch{min-height:54px}
  .codex-qtools-snippets{grid-template-columns:1fr}
  .codex-qtools-outputrow{grid-template-columns:1fr}
  .codex-qtools-copy-main{min-height:38px}
}
