/* =======================================================================
   WIKI FÍSICA 2° medio — hoja de estilo de referencia
   Misma FAMILIA visual que la wiki de Biología de WhiteBox Juegos
   (Inter, pasteles planos, registro ENCICLOPÉDICO: modo claro, serio,
   con aire, medida de lectura cómoda), pero con acento propio de FÍSICA:
   azul físico + violeta como secundario.

   Cómo incluir (en el <head> de cada artículo, en este orden):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
     <link rel="stylesheet" href="../style.css">

   IMPORTANTE: Inter se carga con <link> en cada página (arriba),
   NUNCA con @import aquí (bloquea el render).

   La barra lateral la INYECTA nav.js (ver ../nav.js). El artículo solo
   escribe su <main class="wiki-main"> … </main>; el <aside class="wiki-nav">,
   la topbar móvil y el backdrop los crea el script.
======================================================================= */

:root{
  /* Base heredada de la familia WhiteBox Juegos */
  --bg:#fafaf8;          /* fondo de página */
  --paper:#ffffff;       /* fondo de columna de lectura y cajas */
  --ink:#16161a;         /* texto principal */
  --ink-soft:#33333c;    /* texto de párrafo (un punto más suave que titulares) */
  --muted:#6f6f7a;       /* texto secundario, pies de figura, metadatos */
  --line:#e8e8ee;        /* bordes y separadores */
  --line-soft:#f0f0f4;   /* separadores muy tenues */

  /* Acento FÍSICO — azul */
  --accent:#2f6fb0;      /* azul físico — enlaces, títulos de sección, marca */
  --accent-ink:#245a91;  /* azul oscuro para texto sobre fondo claro (contraste AA) */
  --accent-wash:#e8f0f8; /* azul lavado — fondos de caja/definición */
  --vio:#7b6cc9;         /* violeta — acento secundario (conexión con el juego) */
  --vio-ink:#574aa0;     /* violeta oscuro para texto */
  --vio-wash:#efecfa;    /* violeta lavado — fondo de caja */

  /* Semánticos de caja */
  --warn:#d98a2b;        /* ámbar — advertencia / error común */
  --warn-ink:#9a5c12;
  --warn-wash:#fbf1e3;
  --ok:#3f9a6a;          /* verde — resumen / correcto */
  --ok-wash:#e8f4ec;

  --radius:16px;
  --radius-sm:12px;
  --nav-w:288px;
  --measure:68ch;        /* medida de lectura cómoda */
  --font:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--accent-ink); text-decoration:none;}
a:hover{text-decoration:underline;}

/* =======================================================================
   1. LAYOUT — sidebar fija + columna de lectura
======================================================================= */

/* Barra lateral (la inyecta nav.js) */
.wiki-nav{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--nav-w);
  background:var(--paper);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  z-index:40;
}
.wiki-nav-head{
  padding:26px 24px 18px;
  border-bottom:1px solid var(--line);
}
.wiki-nav-brand{
  display:flex; align-items:center; gap:10px;
  color:var(--ink); text-decoration:none; font-weight:800;
  font-size:1.06rem; letter-spacing:-.01em;
}
.wiki-nav-brand:hover{text-decoration:none;}
.wiki-nav-mark{font-size:1.5rem; line-height:1;}
.wiki-nav-title b{color:var(--accent-ink); font-weight:800;}
.wiki-nav-sub{
  margin-top:6px; font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.wiki-nav-tree{padding:10px 14px 8px; flex:1;}

.wiki-unit{margin:6px 0 14px;}
.wiki-unit-name{
  font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent-ink);
  padding:10px 10px 6px;
}
.wiki-unit ul{list-style:none; margin:0; padding:0;}
.wiki-unit li{margin:1px 0;}
.wiki-unit a{
  display:block;
  padding:7px 10px;
  border-radius:9px;
  color:var(--ink-soft);
  font-size:.9rem;
  font-weight:500;
  line-height:1.35;
  text-decoration:none;
  transition:background .12s, color .12s;
}
.wiki-unit a:hover{background:var(--line-soft); color:var(--ink); text-decoration:none;}
.wiki-unit a.is-current{
  background:var(--accent-wash);
  color:var(--accent-ink);
  font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent);
}
.wiki-nav-foot{
  padding:16px 24px 22px;
  border-top:1px solid var(--line);
  font-size:.82rem;
}
.wiki-nav-foot a{color:var(--muted); font-weight:600;}
.wiki-nav-foot a:hover{color:var(--accent-ink);}

/* Columna principal */
.wiki-main{
  margin-left:var(--nav-w);
  padding:0;
  min-height:100vh;
}
.wiki-article{
  max-width:calc(var(--measure) + 96px);
  margin:0 auto;
  padding:40px 48px 96px;
}

/* Topbar móvil + botón ☰ + backdrop (los inyecta nav.js; ocultos en desktop) */
.wiki-topbar{display:none;}
.wiki-backdrop{display:none;}

/* =======================================================================
   2. BREADCRUMBS
======================================================================= */
.wiki-breadcrumb{
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:22px;
  line-height:1.5;
}
.wiki-breadcrumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.wiki-breadcrumb a{color:var(--muted); font-weight:600;}
.wiki-breadcrumb a:hover{color:var(--accent-ink);}
.wiki-breadcrumb .sep{color:var(--line); user-select:none;}
.wiki-breadcrumb [aria-current="page"]{color:var(--ink-soft); font-weight:600;}

/* =======================================================================
   3. TIPOGRAFÍA DE ARTÍCULO
======================================================================= */
.wiki-article h1{
  font-size:clamp(1.9rem,4.2vw,2.7rem);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.12;
  margin:0 0 10px;
}
.wiki-kicker{
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 12px;
}
.wiki-lede{
  font-size:1.14rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:var(--measure);
  margin:0 0 8px;
}
.wiki-meta{
  font-size:.82rem; color:var(--muted);
  padding-bottom:22px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}

/* Bloques de texto: limitados a la medida de lectura */
.wiki-article > p,
.wiki-article > ul,
.wiki-article > ol,
.wiki-article > h2,
.wiki-article > h3,
.wiki-article > blockquote,
.wiki-section > p,
.wiki-section > ul,
.wiki-section > ol,
.wiki-section > h3,
.wiki-section > blockquote{
  max-width:var(--measure);
}

.wiki-article h2{
  font-size:1.5rem; font-weight:700; letter-spacing:-.015em;
  line-height:1.25; margin:2.2em 0 .5em; padding-top:.2em;
}
.wiki-article h3{
  font-size:1.16rem; font-weight:700; letter-spacing:-.01em;
  margin:1.8em 0 .4em; color:var(--ink);
}
.wiki-article p{
  margin:0 0 1.1em;
  color:var(--ink-soft);
  font-size:1.0625rem;
}
.wiki-article strong{font-weight:700; color:var(--ink);}
.wiki-article em{font-style:italic;}

/* Término destacado en línea (primer uso de un concepto) */
.wiki-term{font-weight:700; color:var(--accent-ink);}

/* Fórmula / magnitud en línea (v, a, F = m·a…) — monoespaciada sutil */
.wiki-var{
  font-family:'Iowan Old Style','Palatino Linotype',ui-serif,Georgia,serif;
  font-style:italic; font-weight:600; color:var(--accent-ink);
}
/* Ecuación destacada centrada, en su propia línea */
.wiki-eq{
  max-width:var(--measure);
  margin:1.4em 0;
  padding:16px 18px;
  text-align:center;
  background:var(--accent-wash);
  border:1px solid #cfe0f0;
  border-radius:var(--radius-sm);
  font-family:'Iowan Old Style','Palatino Linotype',ui-serif,Georgia,serif;
  font-size:1.28rem; font-style:italic; color:var(--accent-ink);
  letter-spacing:.01em;
}

/* Listas */
.wiki-article ul,
.wiki-article ol{margin:0 0 1.2em; padding-left:1.4em;}
.wiki-article li{margin:.35em 0; color:var(--ink-soft); font-size:1.0625rem; line-height:1.65;}
.wiki-article li::marker{color:var(--accent);}
.wiki-article ul.plain{list-style:none; padding-left:0;}

/* Cita / bloque destacado */
.wiki-article blockquote{
  margin:1.6em 0;
  padding:4px 0 4px 22px;
  border-left:3px solid var(--accent);
  color:var(--ink-soft);
  font-size:1.12rem;
  font-style:italic;
  line-height:1.55;
}
.wiki-article blockquote cite{
  display:block; margin-top:.5em; font-size:.85rem;
  font-style:normal; font-weight:600; color:var(--muted);
}

hr.wiki-rule{
  border:none; border-top:1px solid var(--line);
  margin:2.4em 0; max-width:var(--measure);
}

/* =======================================================================
   4. TABLAS
======================================================================= */
.wiki-tablewrap{
  max-width:var(--measure);
  overflow-x:auto;
  margin:1.6em 0;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
table.wiki-table{
  width:100%; border-collapse:collapse; font-size:.95rem;
  background:var(--paper);
}
.wiki-table caption{
  caption-side:top; text-align:left; padding:12px 14px 10px;
  font-size:.82rem; color:var(--muted); font-weight:600;
}
.wiki-table th{
  text-align:left; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accent-ink); font-weight:700;
  padding:11px 14px; background:var(--accent-wash);
  border-bottom:1px solid var(--line);
}
.wiki-table td{
  padding:11px 14px; border-bottom:1px solid var(--line-soft);
  color:var(--ink-soft); vertical-align:top;
}
.wiki-table tr:last-child td{border-bottom:none;}
.wiki-table tbody tr:hover{background:var(--line-soft);}

/* =======================================================================
   5. FIGURAS — hero (<img>) y figura interna (SVG o <img>)
======================================================================= */
figure.wiki-hero{
  margin:0 0 30px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper);
}
figure.wiki-hero img{
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
}
figure.wiki-hero figcaption{
  padding:11px 16px;
  font-size:.82rem; color:var(--muted); line-height:1.5;
  border-top:1px solid var(--line);
}

figure.wiki-fig{
  max-width:var(--measure);
  margin:2em 0;
  padding:20px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
figure.wiki-fig .wiki-fig-body{display:flex; justify-content:center;}
figure.wiki-fig svg,
figure.wiki-fig img{max-width:100%; height:auto;}
figure.wiki-fig figcaption{
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:.85rem; color:var(--muted); line-height:1.55;
}
figure.wiki-fig figcaption b{color:var(--ink-soft); font-weight:700;}

/* Figura ancha ocasional (rompe la medida hasta el ancho de columna) */
figure.wiki-fig.wide{max-width:100%;}

/* =======================================================================
   6. CAJAS ESPECIALES
======================================================================= */
.wiki-box{
  max-width:var(--measure);
  margin:1.8em 0;
  padding:18px 20px 18px 22px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--paper);
  position:relative;
}
.wiki-box .wiki-box-label{
  display:flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:8px;
}
.wiki-box .wiki-box-label .ico{font-size:1rem; line-height:1;}
.wiki-box p{margin:.4em 0; font-size:1rem; color:var(--ink-soft);}
.wiki-box p:first-of-type{margin-top:0;}
.wiki-box p:last-child{margin-bottom:0;}
.wiki-box ul,.wiki-box ol{margin:.4em 0; padding-left:1.3em;}
.wiki-box li{font-size:1rem;}

/* Definición / glosario — azul */
.wiki-box.def{
  background:var(--accent-wash);
  border-color:#cfe0f0;
  box-shadow:inset 4px 0 0 var(--accent);
}
.wiki-box.def .wiki-box-label{color:var(--accent-ink);}
.wiki-box.def .wiki-term-word{font-weight:800; color:var(--accent-ink);}

/* Conexión con el juego — violeta */
.wiki-box.game{
  background:var(--vio-wash);
  border-color:#ddd6f4;
  box-shadow:inset 4px 0 0 var(--vio);
}
.wiki-box.game .wiki-box-label{color:var(--vio-ink);}
.wiki-box.game a{color:var(--vio-ink); font-weight:700;}

/* Advertencia / error común — ámbar */
.wiki-box.warn{
  background:var(--warn-wash);
  border-color:#f0dcbe;
  box-shadow:inset 4px 0 0 var(--warn);
}
.wiki-box.warn .wiki-box-label{color:var(--warn-ink);}

/* En resumen — verde suave */
.wiki-box.summary{
  background:var(--ok-wash);
  border-color:#cfe8d7;
  box-shadow:inset 4px 0 0 var(--ok);
}
.wiki-box.summary .wiki-box-label{color:#2f7a53;}
.wiki-box.summary ul{list-style:none; padding-left:0;}
.wiki-box.summary li{
  position:relative; padding-left:26px; margin:.5em 0;
}
.wiki-box.summary li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--ok); font-weight:800;
}

/* =======================================================================
   7. FOOTER DE ARTÍCULO — anterior / siguiente + portal
======================================================================= */
.wiki-article-foot{
  max-width:var(--measure);
  margin:56px 0 0;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.wiki-pager{
  display:flex; gap:14px; flex-wrap:wrap;
}
.wiki-pager a{
  flex:1 1 240px;
  display:flex; flex-direction:column; gap:4px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  text-decoration:none;
  transition:border-color .14s, transform .14s;
}
.wiki-pager a:hover{border-color:var(--accent); transform:translateY(-2px); text-decoration:none;}
.wiki-pager a.next{text-align:right; align-items:flex-end;}
.wiki-pager .dir{
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.wiki-pager .ttl{font-size:.98rem; font-weight:700; color:var(--ink); line-height:1.3;}
.wiki-pager a:only-child{flex-basis:100%;}

.wiki-portal-link{
  margin-top:22px; text-align:center;
  font-size:.85rem; color:var(--muted);
}
.wiki-portal-link a{color:var(--accent-ink); font-weight:600;}

/* =======================================================================
   8. RESPONSIVE — colapso de sidebar en tablet/móvil
======================================================================= */
@media (max-width:900px){
  :root{--nav-w:280px;}

  .wiki-main{margin-left:0;}
  .wiki-article{padding:20px 22px 80px;}

  /* Topbar móvil fija con ☰ */
  .wiki-topbar{
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:30;
    height:56px; padding:0 16px;
    background:rgba(250,250,248,.92);
    backdrop-filter:saturate(180%) blur(8px);
    border-bottom:1px solid var(--line);
  }
  .wiki-navtoggle{
    width:40px; height:40px; flex:none;
    display:grid; place-items:center;
    border:1px solid var(--line); border-radius:10px;
    background:var(--paper); color:var(--ink);
    font-size:1.3rem; cursor:pointer; line-height:1;
  }
  .wiki-navtoggle:active{transform:translateY(1px);}
  .wiki-topbar-title{
    font-weight:800; font-size:.95rem; letter-spacing:-.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .wiki-topbar-title b{color:var(--accent-ink);}

  /* Sidebar como cajón deslizante */
  .wiki-nav{
    transform:translateX(-100%);
    transition:transform .26s ease;
    box-shadow:0 0 40px rgba(22,22,26,.14);
    width:var(--nav-w);
  }
  body.wiki-nav-open .wiki-nav{transform:translateX(0);}

  .wiki-backdrop{
    display:block;
    position:fixed; inset:0; z-index:35;
    background:rgba(22,22,26,.34);
    opacity:0; pointer-events:none;
    transition:opacity .26s;
  }
  body.wiki-nav-open .wiki-backdrop{opacity:1; pointer-events:auto;}

  /* Evita scroll de fondo cuando el cajón está abierto */
  body.wiki-nav-open{overflow:hidden;}
}

@media (max-width:390px){
  .wiki-article{padding:16px 16px 72px;}
  .wiki-article h1{font-size:1.6rem;}
  .wiki-lede{font-size:1.05rem;}
  .wiki-article p,.wiki-article li{font-size:1.02rem;}
  .wiki-box{padding:16px;}
  .wiki-eq{font-size:1.12rem; padding:13px 14px;}
  figure.wiki-fig{padding:14px;}
  figure.wiki-hero img{aspect-ratio:16/9;}
  .wiki-pager a{flex-basis:100%;}
  :root{--nav-w:86vw;}
}

/* Accesibilidad: foco visible */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}