/* ============================================================
   extras.css — añadidos sobre theme.css
   Cargar SIEMPRE después de theme.css:
     <link rel="stylesheet" href="assets/css/theme.css">
     <link rel="stylesheet" href="assets/css/extras.css">
   ============================================================ */

/* ------------------------------------------------------------
   1 · Logo Clack en la barra del menú
   El PNG del logo está pensado para fondo oscuro (así se usa en
   la brandbar). Por eso va sobre una placa navy, que además lo
   separa visualmente del menú y funciona igual en tema claro y
   oscuro. Si el archivo no carga, el <span> de respaldo entra.
   ------------------------------------------------------------ */
.logo .logoplate{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); border:1.5px solid var(--navy-2);
  border-radius:9px; padding:7px 11px; flex:0 0 auto;
}
/* la regla base alinea por baseline; con placa hay que centrar */
.hd .logo{ align-items:center }
.logo .logoplate img{ height:19px; width:auto; display:block }
.logo .logoplate .fb{
  display:none; font-weight:800; font-size:17px; letter-spacing:-.4px;
  color:#fff; line-height:1;
}
.logo .logoplate .fb b{ color:var(--accent-navy) }
.logo:hover .logoplate{ border-color:var(--blue) }
@media(max-width:900px){
  .logo .logoplate{ padding:6px 9px }
  .logo .logoplate img{ height:16px }
}

/* ------------------------------------------------------------
   2 · Fotos de los controladores (sección 03)
   Las fotos vienen del catálogo con fondo blanco, así que la
   celda se mantiene blanca también en tema oscuro.
   ------------------------------------------------------------ */
.ctable th.hph{ width:96px }
.ctable td.cph{ padding:8px 10px; vertical-align:middle }
.ctable td.cph .shot{
  width:82px; height:62px; border-radius:8px; overflow:hidden;
  background:#fff; border:1.5px solid var(--line);
  display:grid; place-items:center;
}
html[data-theme="dark"] .ctable td.cph .shot{ background:#F4F7F9 }
.ctable td.cph img{
  width:100%; height:100%; object-fit:contain; display:block; padding:4px;
}
.tscroll .ctable{ min-width:760px }

/* tira de componentes internos, debajo de la tabla */
.parts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px; margin-top:14px;
}
.part{
  display:flex; align-items:center; gap:12px; padding:11px 13px;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow);
}
.part .shot{
  width:74px; height:56px; flex:0 0 auto; border-radius:8px; overflow:hidden;
  background:#fff; border:1.5px solid var(--line); display:grid; place-items:center;
}
html[data-theme="dark"] .part .shot{ background:#F4F7F9 }
.part .shot img{ width:100%; height:100%; object-fit:contain; display:block; padding:3px }
.part b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.1px }
.part span{ font-size:12px; color:var(--ink-soft); line-height:1.35 }

/* ------------------------------------------------------------
   3 · Menú fijo en la home
   theme.css ya lo declara sticky; aquí se sube por encima de
   cualquier contenido y se le pone sombra al despegarse, para que
   se lea como barra flotante y no como parte del papel.
   ------------------------------------------------------------ */
header{
  position:sticky; top:0; z-index:50;
  box-shadow:0 6px 18px -12px rgba(15,22,29,.55);
}
html[data-theme="dark"] header{ box-shadow:0 6px 18px -10px rgba(0,0,0,.7) }
/* la brandbar sí se va con el scroll: el menú es lo que se queda */
.brandbar{ position:relative; z-index:1 }

/* ------------------------------------------------------------
   4 · Sección activa en el menú
   .on ya existe en theme.css; aquí solo se le suma la marca
   inferior para que se lea de un vistazo cuál está activa.
   ------------------------------------------------------------ */
nav.mainnav a{ position:relative }
nav.mainnav a.on::after{
  content:""; position:absolute; left:11px; right:11px; bottom:3px;
  height:2.5px; border-radius:2px; background:var(--blue);
}
@media (prefers-reduced-motion:no-preference){
  nav.mainnav a{ transition:color .16s, background-color .16s, border-color .16s }
}