/* dev.portfolio — Neovim UI, pure CSS (no JavaScript)
   Color scheme: Rosé Pine Moon — rose-pine.com */

/* 1. DESIGN TOKENS ------------------------------------------------ */
:root {
  /* Backgrounds */
  --bg:           #232136;  /* base — main editor bg */
  --bg-dark:      #1f1d2e;  /* darker — titlebar / chrome */
  --bg-sidebar:   #2a273f;  /* surface — Neotree */
  --bg-float:     #393552;  /* overlay — popups / terminal */
  --bg-hl:        #44415a;  /* highlight-med — cursorline */
  --bg-tab-off:   #1f1d2e;  /* inactive tab */
  --bg-tab-on:    #232136;  /* active tab */
  --bg-statusbar: #3e8fb0;  /* pine — statusbar */
  --bg-mode:      #9ccfd8;  /* foam — NORMAL mode badge */

  /* Foreground */
  --fg:          #e0def4;   /* text — main */
  --fg-dim:      #44415a;   /* highlight-med — line numbers */
  --fg-comment:  #6e6a86;   /* muted */
  --fg-inactive: #6e6a86;   /* muted — inactive tabs */
  --fg-sidebar:  #908caa;   /* subtle — sidebar text */

  /* Syntax tokens */
  --syn-kw:  #c4a7e7;  /* iris  — keywords */
  --syn-ty:  #9ccfd8;  /* foam  — types */
  --syn-va:  #e0def4;  /* text  — variables */
  --syn-pr:  #9ccfd8;  /* foam  — properties */
  --syn-st:  #f6c177;  /* gold  — strings */
  --syn-nu:  #ea9a97;  /* rose  — numbers / booleans */
  --syn-op:  #908caa;  /* subtle — operators */
  --syn-pu:  #e0def4;  /* text  — punctuation */
  --syn-cm:  #6e6a86;  /* muted — comments */
  --syn-lk:  #9ccfd8;  /* foam  — links */

  /* Simulated terminal */
  --term-bg:    #1f1d2e;
  --term-fg:    #e0def4;
  --term-green: #9ccfd8;  /* foam */
  --term-blue:  #3e8fb0;  /* pine */
  --term-dim:   #6e6a86;  /* muted */
  --term-h:     280px;    /* animated terminal height */

  /* Borders & decoration */
  --border:      #393552;  /* overlay */
  --tree-active: #2a283e;  /* highlight-low */
  --skill-track: #2a283e;  /* highlight-low */
  --skill-fill:  #3e8fb0;  /* pine */

  /* Typography */
  --font: "JetBrains Mono", "Cascadia Code", "Fira Code", monospace;
  --fs:   13.5px;
  --lh:   1.65;

  /* Chrome heights */
  --titlebar-h:  27px;
  --tabbar-h:    34px;
  --statusbar-h: 24px;
  --sidebar-w:   210px;
  --ln-w:        3.2rem;  /* line-number column width */
}

/* 2. RESET ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--bg-dark);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  overflow: hidden; /* scroll happens inside each panel */
}

/* 3. HIDDEN RADIO INPUTS — tab switching without JavaScript
   CSS uses :checked state + general sibling selector (~)
   to activate the correct panel, tab, and sidebar file. */
.tab-radio {
  display: none;
}

/* 4. NEOVIM WINDOW — 4-row grid: titlebar / tabbar / body / statusbar */
.nvim-window {
  display: grid;
  grid-template-rows: var(--titlebar-h) var(--tabbar-h) 1fr var(--statusbar-h);
  height: 100dvh;
  overflow: hidden;
}

/* 5. TITLE BAR (OS window chrome) */
.nvim-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  color: var(--fg-inactive);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  user-select: none;
}

/* 6. TABLINE — open buffer tabs
   Each <label> points to a radio input; clicking it activates the buffer. */
.nvim-tabbar {
  display: flex;
  align-items: stretch;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
  user-select: none;
}

/* Individual tab — equal width, filling the full tabbar */
.tab {
  flex: 1;               /* all tabs share the available width equally */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  cursor: pointer;
  color: var(--fg-inactive);
  background: var(--bg-tab-off);
  border-right: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
  position: relative;
  transition:
    color 0.12s,
    background 0.12s;
}

.tab:hover {
  color: var(--fg);
}

/* File-type badge inside tab */
.tab-lang {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
}
.tab-lang.ts {
  color: #9ccfd8;
} /* foam  */
.tab-lang.json {
  color: #f6c177;
} /* gold  */

/* × close button — love color */
.tab-x {
  color: #eb6f92; /* love */
  font-size: 13px;
  opacity: 0.55;
  transition: opacity 0.12s;
}
.tab:hover .tab-x {
  opacity: 1;
}

/* 7. BODY — sidebar + editor side by side */
.nvim-body {
  display: flex;
  overflow: hidden;
  min-height: 0; /* required for overflow to work inside flex */
}

/* 8. NEOTREE SIDEBAR — mimics the neo-tree.nvim plugin */
.neotree {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  user-select: none;
}

/* Neotree panel header */
.neotree-header {
  margin: 0; /* reset browser default <h2> margin */
  padding: 6px 10px 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-comment);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* File tree rows */
.tree-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  padding-left: calc(8px + var(--d, 0) * 14px); /* indent level via --d custom property */
  font-size: 12.5px;
}

/* Directory row */
.tree-dir {
  color: var(--fg-comment);
  cursor: default;
}

.tree-caret.open {
  color: var(--fg-inactive);
}

/* File row — <label> makes it clickable */
.tree-file {
  color: var(--fg-sidebar);
  cursor: pointer;
  transition:
    background 0.1s,
    color 0.1s;
  border-radius: 2px;
}
.tree-file:hover {
  background: rgba(156, 207, 216, 0.07); /* foam at low opacity */
  color: var(--fg);
}

/* File-type icon badge */
.ficon {
  font-size: 9px;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 2px;
  flex-shrink: 0;
  letter-spacing: 0;
}
.ficon.ts   { color: #9ccfd8; background: rgba(156,207,216,0.12); } /* foam */
.ficon.json { color: #f6c177; background: rgba(246,193,119,0.12); } /* gold */
.ficon.dir  { font-size: 12px; background: none; padding: 0; }       /* folder emoji */
.tree-caret {
  font-size: 7px;
  color: var(--fg-comment);
}

/* 9. EDITOR AREA — holds all panels; only the active one is shown */
.editor-area {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  background: var(--bg);
  position: relative;
}

/* Base panel (buffer) — hidden by default */
.panel {
  display: none;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}

/* Scrollable code area inside a panel */
.editor-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding: 10px 0 24px;
  min-height: 0;
}

/* 10. CODE LINES — line numbers via CSS counters
   counter-increment generates numbers automatically; no hardcoded HTML. */
.code-lines {
  list-style: none;
  counter-reset: line;
  min-width: max-content; /* prevent lines from wrapping */
}

.code-lines > li {
  counter-increment: line;
  display: flex;
  align-items: baseline;
  min-height: calc(var(--lh) * 1em);
  padding-right: 40px;
  transition: background 0.08s;
}

/* Line number generated by ::before pseudo-element */
.code-lines > li::before {
  content: counter(line);
  display: inline-block;
  width: var(--ln-w);
  text-align: right;
  padding-right: 18px;
  color: var(--fg-dim);
  flex-shrink: 0;
  user-select: none;
  font-size: 11.5px;
  opacity: 0.6;
}

/* Hover highlight — mimics cursorline */
.code-lines > li:hover {
  background: var(--bg-hl);
}
.code-lines > li.blank {
  min-height: calc(var(--lh) * 1em);
}

/* Indentation helpers */
.c-in1 { display: inline-block; width: 2ch; }
.c-in2 { display: inline-block; width: 4ch; }

/* 11. SYNTAX TOKENS — one class per syntax category, used on <span>s */
.c-kw  { color: var(--syn-kw); }  /* keyword */
.c-ty  { color: var(--syn-ty); }  /* type */
.c-va  { color: var(--syn-va); }  /* variable */
.c-pr  { color: var(--syn-pr); }  /* property */
.c-st  { color: var(--syn-st); }  /* string */
.c-nu  { color: var(--syn-nu); }  /* number */
.c-bo  { color: var(--syn-nu); }  /* boolean */
.c-op  { color: var(--syn-op); }  /* operator */
.c-pu  { color: var(--syn-pu); }  /* punctuation */
.c-tx  { color: var(--fg); }      /* plain text */
.c-comment { color: var(--syn-cm); font-style: italic; }

/* Clickable links styled as strings */
.c-link {
  color: var(--syn-lk);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 207, 255, 0.25);
  transition:
    border-color 0.12s,
    color 0.12s;
}
.c-link:hover {
  color: #a9dcff;
  border-bottom-color: var(--syn-lk);
}

/* 12. SKILL BARS — inline progress bars; --pct sets fill width */
.skill-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Bar track */
.skill-bar {
  display: inline-block;
  width: 110px;
  height: 4px;
  background: var(--skill-track);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Colored fill */
.skill-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--skill-fill), #7aa2f7);
  border-radius: 99px;
}

/* 13. ANIMATED TERMINAL — mimics Neovim's :terminal split.
   Slides up from the bottom of presentation.tsx.
   Starts at height:0, animates to --term-h via @keyframes term-open.
   Each .term-line starts invisible and fades in with staggered delays. */
.nvim-term {
  flex-shrink: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--term-bg);
  /* resize:vertical enabled once the animation gives it height (see section 17) */
  min-height: 100px;
  max-height: 70vh;
}

/* Terminal status bar — mimics the split's statusline */
.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-float); /* overlay */
  border-bottom: 1px solid var(--border);
  padding: 0 10px;
  height: 22px;
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--fg-inactive);
}

.term-mode {
  color: var(--bg-dark);
  background: #f6c177; /* gold */
  font-weight: 700;
  font-size: 10.5px;
  padding: 0 5px;
  border-radius: 2px;
}

.term-title {
  color: var(--fg-comment);
}

/* Scrollable terminal output body */
.term-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 14px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  font-size: 12.5px;
  line-height: 1.55;
}

/* One output line — display:flex collapses HTML whitespace */
.term-line {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  opacity: 0; /* hidden until animation reveals it */
  line-height: 1.55;
}

/* Terminal output tokens */
.t-prompt {
  color: var(--term-green);
}
.t-cmd {
  color: var(--fg);
}
.t-ty {
  color: var(--syn-ty);
}
.t-pr {
  color: var(--syn-pr);
}
.t-st {
  color: var(--syn-st);
}
.t-bo {
  color: var(--syn-nu);
}
.t-pu {
  color: var(--syn-pu);
}
.t-dim {
  color: var(--term-dim);
  font-style: italic;
}
.t-in1 {
  display: inline-block;
  width: 2ch;
}

/* Blinking block cursor */
.t-cursor {
  display: inline-block;
  color: var(--fg);
  animation: blink 1s step-start infinite;
}

/* 14. KEYFRAMES -------------------------------------------------- */

/* Terminal slides up from the bottom */
@keyframes term-open {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--term-h);
    opacity: 1;
  }
}

/* Terminal line fades in with a slight upward shift */
@keyframes line-appear {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Blinking cursor */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* 15. STATUS BAR — mimics lualine.nvim (left / center / right)
   Active filename and language are driven by CSS radio state. */
.nvim-statusbar {
  display: flex;
  align-items: stretch;
  background: var(--bg-statusbar);
  color: #fff;
  font-size: 11.5px;
  user-select: none;
  overflow: hidden;
}

.sb-left,
.sb-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sb-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

/* Mode badge (NORMAL) */
.sb-mode {
  background: var(--bg-mode);
  color: var(--bg-dark);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.07em;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Git branch */
.sb-branch {
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.18);
  font-size: 11px;
  gap: 4px;
}

/* Cursor position and encoding */
.sb-pos,
.sb-enc {
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.18);
  font-size: 11px;
}

/* Language type badge */
.sl { padding: 0 10px; display: none; align-items: center; }

/* Active filename — hidden by default, shown via :checked selector */
.sf { display: none; }

/* 16. TAB SWITCHING — the core of the no-JS system
   General sibling selector (~) reaches from radio inputs into .nvim-window.
   Each radio activates: the editor panel, the active tab, the sidebar file,
   and the statusbar filename + language badge. */

/* Show the correct panel */
#r-presentation:checked ~ .nvim-window .panel-presentation,
#r-about:checked ~ .nvim-window .panel-about,
#r-skills:checked ~ .nvim-window .panel-skills,
#r-contact:checked ~ .nvim-window .panel-contact {
  display: flex; /* flex para que la terminal ocupe su lugar */
}

/* Active tab — full-brightness text, active background */
#r-presentation:checked ~ .nvim-window label[for="r-presentation"].tab,
#r-about:checked ~ .nvim-window label[for="r-about"].tab,
#r-skills:checked ~ .nvim-window label[for="r-skills"].tab,
#r-contact:checked ~ .nvim-window label[for="r-contact"].tab {
  color: var(--fg);
  background: var(--bg-tab-on);
}

/* Active file in Neotree */
#r-presentation:checked ~ .nvim-window label[for="r-presentation"].tree-file,
#r-about:checked ~ .nvim-window label[for="r-about"].tree-file,
#r-skills:checked ~ .nvim-window label[for="r-skills"].tree-file,
#r-contact:checked ~ .nvim-window label[for="r-contact"].tree-file {
  background: var(--tree-active);
  color: var(--fg);
}

/* Statusbar filename and language badge */
#r-presentation:checked ~ .nvim-window .sf-presentation {
  display: flex;
}
#r-about:checked ~ .nvim-window .sf-about {
  display: flex;
}
#r-skills:checked ~ .nvim-window .sf-skills {
  display: flex;
}
#r-contact:checked ~ .nvim-window .sf-contact {
  display: flex;
}

#r-presentation:checked ~ .nvim-window .sl-presentation {
  display: flex;
}

#r-about:checked ~ .nvim-window .sl-json,
#r-skills:checked ~ .nvim-window .sl-json,
#r-contact:checked ~ .nvim-window .sl-json {
  display: flex;
}

/* 17. TERMINAL ANIMATION — only fires when presentation.tsx is active.
   Because the panel goes from display:none to display:flex, the animation
   restarts every time the tab is selected.
   animation-fill-mode:forwards keeps height=--term-h after it ends,
   enabling resize:vertical so the user can drag the border to resize it. */
#r-presentation:checked ~ .nvim-window .nvim-term {
  animation: term-open 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  resize: vertical;
  overflow: hidden;
}

/* Staggered line reveals — delays start after the terminal finishes opening (~0.6s) */
#r-presentation:checked ~ .nvim-window .tl-1 {
  animation: line-appear 0.15s ease 0.65s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-2 {
  animation: line-appear 0.15s ease 0.82s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-3 {
  animation: line-appear 0.12s ease 0.96s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-4 {
  animation: line-appear 0.12s ease 1.08s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-5 {
  animation: line-appear 0.12s ease 1.2s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-6 {
  animation: line-appear 0.12s ease 1.32s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-7 {
  animation: line-appear 0.12s ease 1.44s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-8 {
  animation: line-appear 0.12s ease 1.56s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-9 {
  animation: line-appear 0.15s ease 1.75s forwards;
}
#r-presentation:checked ~ .nvim-window .tl-10 {
  animation: line-appear 0.15s ease 1.95s forwards;
}

/* 18. SCROLLBAR */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3b55;
}

/* 19. RESPONSIVE — hide sidebar and scale typography on small screens */
@media (max-width: 640px) {
  :root {
    --sidebar-w: 0px;
    --fs: 12px;
    --term-h: 220px;
  }
  .neotree {
    display: none;
  }
  .tab {
    padding: 0 6px;
    font-size: 11px;
  }
  .tab-lang { display: none; } /* hide badge on mobile */
}

@media (max-width: 420px) {
  :root {
    --fs: 11px;
  }
  .sb-right {
    display: none;
  }
}