/* =========================================================
   estilolibre.eu — terminal retro, minimalista
   ========================================================= */

:root {
  color-scheme: dark;

  --bg: #0a0c0a;
  --term: #0d120d;
  --green: #4af082;
  --green-dim: #5aa578; /* AA: 6.3:1 sobre --term (antes 2a7a4c, 3.6:1) */
  --amber: #ffb454;
  --white: #c8d6c8;
  --border: #1e2a1e;
  --bar: #141a14;
  --btn: #101510;
  --cyan: #5bd0c8;
  --blue: #79b8ff;
  --ui-border: #5aa578; /* bordes de controles: 6.4:1 sobre --term */
  --link-hover-fg: #ffd28f;
  --link-hover-bg: rgba(255, 180, 84, 0.12);
  --link-rule: rgba(255, 180, 84, 0.4);
  --scan: rgba(0, 0, 0, 0.12);
  --vig-end: rgba(0, 0, 0, 0.5);
  --glow-ring: rgba(74, 240, 130, 0.06);
  --glow-spill: rgba(74, 240, 130, 0.07);
  --drop: rgba(0, 0, 0, 0.6);
  --cursor-glow: 0 0 8px rgba(74, 240, 130, 0.8);
  --text-glow-user: 0 0 8px rgba(74, 240, 130, 0.5);
  --text-glow-host: 0 0 8px rgba(91, 208, 200, 0.4);
}

/* ===== modo "colores claros": papel + tinta, mismo espíritu CRT ===== */
/* Todos los pares texto/fondo medidos >= 4.5:1 (WCAG 2.2 AA) */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #e8e6df;
  --term: #f4f2ec;
  --green: #0f6b3a;      /* 5.9:1 sobre --term */
  --green-dim: #33634a;  /* 4.8:1 sobre --bar, 6.2:1 sobre --term, 5.6:1 sobre --bg */
  --amber: #8a4a00;      /* 6.1:1 sobre --term */
  --white: #232823;      /* 13.4:1 sobre --term */
  --border: #c9c3b4;
  --bar: #dcd7ca;
  --btn: #e9e5da;
  --cyan: #0d6560;
  --blue: #1c58a8;
  --ui-border: #6f6a5c;  /* 4.8:1 sobre --term */
  --link-hover-fg: #6d3a00;
  --link-hover-bg: rgba(138, 74, 0, 0.1);
  --link-rule: rgba(138, 74, 0, 0.45);
  --scan: rgba(0, 0, 0, 0.05);
  --vig-end: rgba(0, 0, 0, 0.16);
  --glow-ring: rgba(15, 107, 58, 0.12);
  --glow-spill: rgba(15, 107, 58, 0.05);
  --drop: rgba(0, 0, 0, 0.18);
  --cursor-glow: none;   /* el brillo fosforito no pinta en papel */
  --text-glow-user: none;
  --text-glow-host: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;
  color: var(--white);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ===== efecto CRT: scanlines + viñeta ===== */
.crt {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    var(--scan) 0px,
    var(--scan) 1px,
    transparent 1px,
    transparent 3px
  );
}

.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    var(--vig-end) 100%
  );
}

/* ===== layout ===== */
.wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  gap: 1.2rem;
}

/* ===== terminal ===== */
.terminal {
  width: min(680px, 100%);
  background: var(--term);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px var(--glow-ring),
    0 0 60px var(--glow-spill),
    0 20px 50px var(--drop);
  overflow: hidden;
}

.terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.9rem;
  background: var(--bar);
  border-bottom: 1px solid var(--border);
}

.terminal__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.terminal__controls {
  display: flex;
  gap: 0.4rem;
}

.win-btn {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  color: var(--green);
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--btn);
}

.win-btn--close:hover {
  color: #ff5f56;
  border-color: #ff5f56;
}

/* control de tema: el único botón real de la barra (las win-btn son decorativas) */
.theme-toggle {
  display: grid;
  place-items: center;
  min-width: 24px; /* WCAG 2.2 · 2.5.8 objetivo táctil mínimo */
  min-height: 24px;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--green);
  background: var(--btn);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  cursor: pointer;
}

.theme-toggle:hover { color: var(--amber); border-color: var(--amber); }

.theme-toggle:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 2px;
}

.theme-toggle[aria-pressed="true"] {
  color: var(--amber);
  border-color: var(--amber);
}

.terminal__title {
  font-size: 0.75rem;
  color: var(--green-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal__body {
  padding: 1.4rem 1.5rem 1.8rem;
  font-size: 0.92rem;
  line-height: 1.9;
  min-height: 21em;
}

/* ===== líneas de terminal ===== */
.line { white-space: pre-wrap; word-break: break-all; }

.line--cmd { color: var(--green); font-weight: 700; }

/* ===== PS1: prompt con colores por segmento ===== */
.prompt { white-space: nowrap; }

.p-user { color: var(--green); font-weight: 700; text-shadow: var(--text-glow-user); }
.p-at, .p-sep, .p-dollar { color: var(--green-dim); }
.p-host { color: var(--cyan); text-shadow: var(--text-glow-host); }
.p-path { color: var(--blue); }
.p-branch { color: var(--amber); }

.line--out { color: var(--white); }
.line--spacer { height: 0.7em; }
.line--dim { color: var(--green-dim); }
.line--link { color: var(--amber); }

.line--link a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px dashed var(--link-rule);
  transition: background 0.15s, color 0.15s;
}

.line--link a:hover,
.line--link a:focus-visible {
  background: var(--link-hover-bg);
  color: var(--link-hover-fg);
}

.line--link a:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 3px;
}

.line--link a::before { content: "→ "; color: var(--green-dim); }

/* cursor que parpadea */
.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--green);
  animation: blink 1s steps(1) infinite;
  box-shadow: var(--cursor-glow);
}

/* texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* resaltar texto verde en salidas */
.out-accent { color: var(--green); }

/* ===== footer ===== */
.footer {
  width: min(680px, 100%);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--green);
}

.footer__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer__dim { color: var(--green-dim); }

/* ===== responsive ===== */
@media (max-width: 640px) {
  .terminal__body {
    font-size: 0.8rem;
    padding: 1.1rem 1rem 1.4rem;
    min-height: 20em;
  }

  .terminal__title { font-size: 0.7rem; }
}

/* ===== accesibilidad: sin animaciones ===== */
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* El tema conmuta en seco: fundir background-color o color haría que axe
   midiera un texto a medio cambiar sobre un fondo nuevo (ratios falsos).
   Lo único que se anima es el borde del propio control. */
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle {
    transition: border-color 0.18s ease;
  }
}