/* infoLinux — estilo tipo Terminal para <pre><code> y <code> inline.
   Sin tocar markup. Añade cromado de ventana y botón copiar via JS.
   Paleta inspirada en Catppuccin Mocha. */

:root {
  --il-term-bg: #1e1e2e;
  --il-term-bar: #181825;
  --il-term-text: #cdd6f4;
  --il-term-muted: #a6adc8;
  --il-term-green: #a6e3a1;
  --il-term-yellow: #f9e2af;
  --il-term-red: #f38ba8;
  --il-term-accent: #89b4fa;
  --il-inline-bg: #eef2f4;
  --il-inline-fg: #b3295e;
}

/* Bloque: <pre><code>…</code></pre> → ventana de terminal */
pre:has(> code) {
  position: relative;
  background: var(--il-term-bg);
  color: var(--il-term-text);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  padding: 46px 16px 18px;
  margin: 1.4em 0;
  overflow-x: auto;
  line-height: 1.55;
  font-size: 14px;
  font-family: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
}

/* Fallback para navegadores sin :has() */
.il-term-block {
  position: relative;
  background: var(--il-term-bg);
  color: var(--il-term-text);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  padding: 46px 16px 18px;
  margin: 1.4em 0;
  overflow-x: auto;
  line-height: 1.55;
  font-size: 14px;
  font-family: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Barra superior estilo Powerline: [arch] → [~] ─── ✓ */
pre:has(> code)::before,
.il-term-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background:
    /* Check verde a la derecha */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22'><path d='M4 0 L0 11 L4 22 H24 a4 4 0 0 0 4 -4 V4 a4 4 0 0 0 -4 -4 Z' fill='rgba(166,227,161,0.18)'/><path d='M9 11 l3 4 6 -7' stroke='%23a6e3a1' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 10px center / 28px 22px no-repeat,
    /* Prompt izquierdo: arch + home */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='22' viewBox='0 0 240 22'><path d='M4 0 H120 l11 11 l-11 11 H4 a4 4 0 0 1 -4 -4 V4 a4 4 0 0 1 4 -4 Z' fill='%231793d1'/><path d='M20 3 L9 20 l3 -0.6 l2.5 -3.2 l5.5 3 l5.5 -3 l2.5 3.2 l3 0.6 Z M20 9 l-4 8 l4 -2.4 l4 2.4 Z' fill='%23ffffff'/><text x='34' y='15' font-family='Menlo,monospace' font-size='11' font-weight='700' fill='%23ffffff'>infoLinux</text><path d='M131 0 l11 11 l-11 11 H194 l11 -11 l-11 -11 Z' fill='%23313244'/><path d='M150 16 V11 l6 -5 l6 5 V16 H158 V13 H154 V16 Z' fill='%23cdd6f4'/><text x='170' y='15' font-family='Menlo,monospace' font-size='12' fill='%23cdd6f4'>~</text></svg>") left 10px center / 240px 22px no-repeat,
    /* Línea horizontal fina entre prompt y check */
    linear-gradient(#45475a, #45475a) no-repeat 254px center / calc(100% - 298px) 1px,
    /* Base: gradiente oscuro */
    linear-gradient(180deg, var(--il-term-bar) 0%, #11111b 100%);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* Texto dentro del bloque */
pre > code,
.il-term-block > code {
  display: block;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
  border: 0;
  box-shadow: none;
}

/* Botón copiar (añadido vía JS) */
.il-copy-btn {
  position: absolute;
  top: 40px;
  right: 8px;
  background: rgba(137, 180, 250, 0.14);
  color: var(--il-term-text);
  border: 1px solid rgba(205, 214, 244, 0.14);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.6;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.il-copy-btn:hover {
  background: rgba(137, 180, 250, 0.25);
  border-color: rgba(205, 214, 244, 0.28);
}
.il-copy-btn.is-copied {
  background: rgba(166, 227, 161, 0.25);
  border-color: rgba(166, 227, 161, 0.4);
  color: var(--il-term-green);
}

/* Selección dentro del terminal */
pre > code::selection,
.il-term-block > code::selection,
pre > code ::selection,
.il-term-block > code ::selection {
  background: rgba(137, 180, 250, 0.35);
  color: #fff;
}

/* Scrollbar sutil */
pre:has(> code),
.il-term-block {
  scrollbar-width: thin;
  scrollbar-color: #45475a transparent;
}
pre:has(> code)::-webkit-scrollbar,
.il-term-block::-webkit-scrollbar { height: 8px; }
pre:has(> code)::-webkit-scrollbar-thumb,
.il-term-block::-webkit-scrollbar-thumb {
  background: #45475a; border-radius: 4px;
}

/* Inline <code> — chip discreto */
:not(pre) > code {
  background: var(--il-inline-bg);
  color: var(--il-inline-fg);
  padding: 1.5px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  font-family: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  border: 1px solid rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}

/* Responsive: en móvil, menos padding y barra ligeramente más baja */
@media (max-width: 600px) {
  pre:has(> code), .il-term-block {
    padding: 40px 12px 14px;
    font-size: 13px;
    border-radius: 8px;
  }
  pre:has(> code)::before, .il-term-block::before {
    height: 28px;
    background-position:
      right 8px center,
      left 8px center,
      232px center,
      0 0;
    background-size:
      26px 20px,
      218px 20px,
      calc(100% - 268px) 1px,
      auto;
  }
}