/* ============================================================================
   podeley.ar — extra.css
   1) Self-hosted fonts   2) --pd-* design tokens (light-only)
   3) Material chrome bridge (the ~80-line "override")   4) Page components
   Ported from the approved v2 design (custom static build).
   ============================================================================ */

/* ---------- 1. Fonts (latin subset, OFL; Sans & Grotesk are variable) ------ */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/space-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-grotesk-500.woff2") format("woff2")}

/* ---------- 2. Tokens (light-only) ----------------------------------------- */
:root{
  --pd-blue:#4EA8DE; --pd-orange:#FF7B54; --pd-green:#43C59E; --pd-gold:#F2C14E;
  --pd-orange-ink:#c24b22; --pd-gold-ink:#8a6412;
  --pd-bg:#ffffff; --pd-surface-2:#f6f7f8;
  --pd-border:#d9dce0; --pd-border-soft:#e8eaed;
  --pd-text:#16181d; --pd-text-muted:#4a5361; --pd-text-faint:#6b7280;
  --pd-primary:var(--pd-orange-ink); --pd-link:var(--pd-orange-ink); --pd-focus:var(--pd-orange-ink);
  --pd-caveat:var(--pd-gold-ink);
  --pd-btn-primary-bg:var(--pd-orange-ink); --pd-btn-primary-fg:#ffffff;
  --pd-font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --pd-font-body:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --pd-font-mono:"IBM Plex Mono",ui-monospace,"Roboto Mono",Menlo,monospace;
  --pd-fs-h1:clamp(2rem,1.4rem + 3.2vw,3.1rem);
  --pd-fs-h2:clamp(1.5rem,1.2rem + 1.6vw,2rem);
  --pd-fs-h3:clamp(1.08rem,1rem + .5vw,1.28rem);
  --pd-fs-lead:clamp(1.02rem,.98rem + .4vw,1.18rem);
  --pd-fs-sm:.875rem; --pd-fs-cap:.72rem;
  --pd-lh-tight:1.14; --pd-lh-body:1.62;
  --pd-r-1:.35rem; --pd-r-2:.6rem; --pd-r-pill:999px;
  --pd-section:clamp(3.4rem,7vw,6rem);
  --pd-rule:110,116,128; --pd-rule-alpha:.18;
  --pd-dur:200ms;
  /* the measurement-field motif (divider) */
  --pd-field:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22132%22%20height%3D%2220%22%20viewBox%3D%220%200%20132%2020%22%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%221.1%22%20y1%3D%229.6%22%20x2%3D%2213.5%22%20y2%3D%2210.4%22%2F%3E%3Cline%20x1%3D%2216.0%22%20y1%3D%228.4%22%20x2%3D%2228.0%22%20y2%3D%2211.6%22%2F%3E%3Cline%20x1%3D%2230.6%22%20y1%3D%228.7%22%20x2%3D%2242.7%22%20y2%3D%2211.3%22%2F%3E%3Cline%20x1%3D%2245.1%22%20y1%3D%2210.3%22%20x2%3D%2257.5%22%20y2%3D%229.7%22%2F%3E%3Cline%20x1%3D%2260.1%22%20y1%3D%2212.0%22%20x2%3D%2271.9%22%20y2%3D%228.0%22%2F%3E%3Cline%20x1%3D%2275.0%22%20y1%3D%2212.5%22%20x2%3D%2286.3%22%20y2%3D%227.5%22%2F%3E%3Cline%20x1%3D%2289.3%22%20y1%3D%2211.4%22%20x2%3D%22101.4%22%20y2%3D%228.6%22%2F%3E%3Cline%20x1%3D%22103.8%22%20y1%3D%229.6%22%20x2%3D%22116.2%22%20y2%3D%2210.4%22%2F%3E%3Cline%20x1%3D%22118.7%22%20y1%3D%228.4%22%20x2%3D%22130.6%22%20y2%3D%2211.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ---------- 3. Material chrome bridge -------------------------------------- */
/* Material sets html{font-size:125%} (1rem=20px). Reset to 16px so the token
   scale holds; re-anchor typeset text at 1rem. Material chrome shrinks ~20%,
   which suits the slim boutique look. */
html{font-size:100%}
.md-typeset{font-size:1rem;line-height:var(--pd-lh-body)}

body,.md-typeset{font-family:var(--pd-font-body);color:var(--pd-text)}
:root{
  --md-default-bg-color:var(--pd-bg);
  --md-default-fg-color:var(--pd-text);
  --md-typeset-color:var(--pd-text);
  --md-typeset-a-color:var(--pd-link);
  --md-accent-fg-color:var(--pd-link);
  --md-primary-fg-color:var(--pd-link);
}

/* header: white, hairline, dark text, display face */
.md-header{background:var(--pd-bg);color:var(--pd-text);box-shadow:none;border-bottom:1px solid var(--pd-border-soft)}
.md-header[data-md-state=shadow],.md-header--shadow{box-shadow:none}
.md-header__title{font-family:var(--pd-font-display);font-weight:500;font-size:.95rem;color:var(--pd-text)}
.md-header__button{color:var(--pd-text-muted)}
.md-header__button:hover{color:var(--pd-text)}
.md-header__button.md-logo img,.md-header__button.md-logo svg{height:1.35rem;width:1.35rem;border-radius:.32rem}
/* language selector (added by static-i18n + Material) */
.md-select button{color:var(--pd-text-muted)}
.md-select__inner{background:var(--pd-bg);border:1px solid var(--pd-border);box-shadow:0 6px 18px -8px rgba(15,23,42,.25);left:auto;right:0;transform:none}
/* the hidden dropdown must never widen the page (mobile) */
html{overflow-x:clip}
.md-select__item .md-select__link{color:var(--pd-text-muted)}
.md-select__item .md-select__link:hover{color:var(--pd-link)}

/* content container: wider, generous */
.md-grid{max-width:78rem}
.md-main__inner{margin-top:0}
.md-content{padding-bottom:0}
.md-content__inner{margin-bottom:0;padding-top:0}
.md-content__inner:before{display:none}
/* hidden sidebars leave a gap — collapse it */
.md-sidebar{display:none !important}
/* kill Material's "back to top", edit, etc. leftovers we don't use */
.md-top{display:none}

/* typeset defaults toward our design */
.md-typeset a{color:var(--pd-link)}
.md-typeset a:focus-visible{outline:2px solid var(--pd-focus);outline-offset:2px;border-radius:var(--pd-r-1)}
.md-typeset h1,.md-typeset h2,.md-typeset h3{font-family:var(--pd-font-display);font-weight:500;color:var(--pd-text);letter-spacing:-.01em}
.md-typeset h1{font-size:var(--pd-fs-h1);line-height:var(--pd-lh-tight);margin:.6em 0 .5em;max-width:24ch}
.md-typeset h2{font-size:var(--pd-fs-h2);line-height:1.16;margin:.8em 0 .4em}
.md-typeset h3{font-size:var(--pd-fs-h3);line-height:1.25}
::selection{background:color-mix(in srgb,var(--pd-orange) 28%,transparent)}

/* footer: replaced by overrides/partials/footer.html; style it */
.md-footer{background:var(--pd-bg);color:var(--pd-text-muted);border-top:1px solid var(--pd-border-soft)}
.pd-footer{max-width:78rem;margin:0 auto;padding:2rem 1.2rem 3rem;display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:center}
.pd-footer .brandline{display:inline-flex;align-items:center;gap:.5rem;color:var(--pd-text-muted);font-size:var(--pd-fs-sm)}
.pd-footer .brandline svg{width:20px;height:20px;border-radius:5px}
.pd-footer p{margin:0;font-family:var(--pd-font-mono);font-size:var(--pd-fs-cap);line-height:1.6;color:var(--pd-text-faint);max-width:60ch}
.pd-footer a{color:var(--pd-text-muted);text-decoration:none}
.pd-footer a:hover{color:var(--pd-text)}
.footer-map{letter-spacing:.03em}


/* ---------- 4. Ajustes para sitios de caso ---------------------------------- */
/* Estos son sitios didácticos, no el portfolio: se conserva la navegación y el
   índice de Material, que es lo que los hace legibles como documentación. */

.md-sidebar { display: block !important; }
.md-nav__title { font-family: var(--pd-font-display); font-weight: 500; }
.md-nav__link--active { color: var(--pd-link); font-weight: 600; }

/* tablas: densas y legibles, que es la mitad del contenido de estos sitios */
.md-typeset table:not([class]) {
  font-size: var(--pd-fs-sm);
  border: 1px solid var(--pd-border-soft);
}
.md-typeset table:not([class]) th {
  background: var(--pd-surface-2);
  font-family: var(--pd-font-body);
  font-weight: 600;
  color: var(--pd-text);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--pd-border-soft); }

/* figuras e iframes: caja consistente y usable en teléfono */
.md-typeset img, .md-typeset iframe {
  border-radius: var(--pd-r-2);
  max-width: 100%;
}
.md-typeset iframe { border: 1px solid var(--pd-border-soft); }
@media (max-width: 760px) {
  .md-typeset iframe { min-height: 60vh; }
}

/* admoniciones al tono de la identidad, sin los colores de fábrica */
.md-typeset .admonition, .md-typeset details {
  border-radius: var(--pd-r-2);
  border-left-width: 3px;
  font-size: var(--pd-fs-sm);
  box-shadow: none;
  border: 1px solid var(--pd-border-soft);
}
.md-typeset .admonition-title, .md-typeset summary {
  font-family: var(--pd-font-body);
  font-weight: 600;
  background: var(--pd-surface-2);
}

/* código: mono de la identidad */
.md-typeset code, .md-typeset pre { font-family: var(--pd-font-mono); }
.md-typeset pre > code { font-size: .8rem; }

/* la nota de corte de datos, para el pie de cada caso */
.md-typeset .datanote {
  border-left: 2px solid var(--pd-border);
  padding: .1rem 0 .1rem .9rem;
  font-family: var(--pd-font-mono);
  font-size: var(--pd-fs-cap);
  line-height: 1.7;
  color: var(--pd-text-faint);
  max-width: 68ch;
}
.md-typeset .datanote strong { color: var(--pd-text-muted); font-weight: 500; }