/* ============================================================
   Daniel Martínez Javega — Portfolio
   Estética "Cyber-Terminal": JetBrains Mono, bordes cuadrados,
   rejilla técnica, línea de escaneo y acento naranja #ff5717.
   Dos temas cohesionados (oscuro = PC, claro = móvil).
   ============================================================ */

/* ---------- Temas ---------- */

:root{
  --accent:      #ff5717;   /* naranja cibernético, igual en ambos temas */
  --accent-soft: #ff7a47;
  --ease: cubic-bezier(.2,.7,.3,1);

  --wrap: 1180px;
}

/* OSCURO — el bueno para PC */
:root,
:root[data-theme="dark"]{
  --bg:        #000000;
  --panel:     #0d0d0d;
  --panel-2:   #141414;   /* cabeceras de panel */
  --panel-3:   #1a1a1a;   /* chips / hover */
  --grid:      rgba(255,255,255,.045);
  --line:      #2e2e2e;   /* borde inactivo */
  --line-soft: #1f1f1f;
  --text:      #ffffff;
  --text-2:    #e2e2e2;
  --muted:     #8c8c8c;
  --dim:       #5a5a5a;
  --accent-ink:#000000;   /* texto sobre relleno naranja */
  --accent-tx: #ff5717;   /* naranja como texto (contraste OK sobre negro) */
  --scan:      rgba(255,87,23,.12);
}

/* CLARO — el bueno para móvil */
:root[data-theme="light"]{
  --bg:        #fdfdfd;
  --panel:     #ffffff;
  --panel-2:   #f3f1f0;
  --panel-3:   #f0edec;
  --grid:      rgba(0,0,0,.05);
  --line:      #d6d3d2;
  --line-soft: #e6e3e2;
  --text:      #141312;
  --text-2:    #2a2725;
  --muted:     #6a6663;
  --dim:       #9a9693;
  --accent-ink:#ffffff;
  --accent-tx: #cc3d00;   /* naranja más oscuro: legible sobre blanco */
  --scan:      rgba(255,87,23,.16);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--text-2);
  font-family:"JetBrains Mono",ui-monospace,"Cascadia Code","Segoe UI Mono",Consolas,monospace;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Rejilla técnica de fondo, fija */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:32px 32px;
}

/* Línea de escaneo que baja (25% más gruesa que el original: 4px -> 5px) */
body::after{
  content:"";
  position:fixed;
  left:0; top:0;
  width:100%;
  height:5px;
  background:var(--scan);
  opacity:.7;
  pointer-events:none;
  z-index:60;
  animation:scan 8s linear infinite;
}
@keyframes scan{
  0%   { transform:translateY(-5px); }
  100% { transform:translateY(100vh); }
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent-tx); text-decoration:none; }

::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
}

/* Tipografía monospace: mayúsculas técnicas */
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.15; }

.mono-label{
  font-family:"Space Mono","JetBrains Mono",monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ============================================================
   CHROME COMÚN: barra superior, pie, escalera
   ============================================================ */

.bar{
  position:fixed;
  left:0; width:100%;
  z-index:50;
  background:var(--bg);
  display:flex;
  align-items:center;
  gap:12px;
}
.bar--top{
  top:0;
  height:56px;
  border-bottom:1px solid var(--line);
  justify-content:space-between;
  padding-inline:clamp(14px,4vw,24px);
}
.bar--bottom{
  bottom:0;
  height:40px;
  border-top:1px solid var(--line);
  justify-content:space-between;
  padding-inline:clamp(14px,4vw,24px);
  font-size:.72rem;
  color:var(--dim);
}

.brand{
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--accent-tx);
  font-size:1.02rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.brand .cursor{
  display:inline-block;
  width:9px; height:1.05em;
  background:var(--accent);
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.bar__status{
  display:none;
  gap:18px;
  color:var(--muted);
  font-size:.74rem;
}
@media (min-width:720px){ .bar__status{ display:flex; } }

.bar__actions{ display:flex; align-items:center; gap:6px; }

.iconbtn{
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.iconbtn:hover{ color:var(--accent-tx); border-color:var(--line); }
.iconbtn svg{ width:20px; height:20px; }

.bar--bottom a{ color:var(--muted); }
.bar--bottom a:hover{ color:var(--accent-tx); }
.bar__right{ display:flex; gap:16px; align-items:center; }

/* Botón "volver" en páginas internas */
.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:color .15s var(--ease);
}
.back:hover{ color:var(--accent-tx); }
.back svg{ width:16px; height:16px; }
.bar__tag{
  color:var(--accent-tx);
  font-family:"Space Mono","JetBrains Mono",monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ============================================================
   HOME — dashboard a pantalla completa (sin scroll en PC)
   ============================================================ */

.home{
  position:relative;
  z-index:1;
  min-height:100svh;
  padding-top:56px;
  padding-bottom:40px;
}

/* Panel lateral (solo PC) */
.side{
  display:none;
  position:fixed;
  left:0; top:56px;
  width:240px;
  height:calc(100svh - 56px - 40px);
  border-right:1px solid var(--line);
  background:var(--bg);
  z-index:40;
  flex-direction:column;
}
.side__id{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-bottom:1px solid var(--line);
}
.side__ava{
  width:44px; height:44px;
  flex:0 0 auto;
  border:1px solid var(--accent);
  background:var(--panel-2);
  color:var(--accent-tx);
  display:grid; place-items:center;
}
.side__ava svg{ width:24px; height:24px; }
.side__name{ color:var(--accent-tx); font-weight:700; font-size:.92rem; }
.side__sub{ color:var(--muted); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }

.side__nav{ display:flex; flex-direction:column; padding-block:12px; flex:1; }
.side__link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 16px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-left:2px solid transparent;
  transition:all .15s var(--ease);
}
.side__link svg{ width:18px; height:18px; }
.side__link:hover{ color:var(--text); background:var(--panel); border-left-color:var(--line); }
.side__link.is-active{ color:var(--accent-tx); background:var(--panel); border-left-color:var(--accent); }

.side__foot{ padding:16px; border-top:1px solid var(--line); }

.home__canvas{
  min-height:calc(100svh - 56px - 40px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(16px,3vh,28px);
  padding:clamp(18px,3.2vh,36px) clamp(16px,4vw,40px);
}

/* Consola de habilidades */
.term{
  border:1px solid var(--accent);
  background:var(--panel);
  max-width:920px;
  width:100%;
  margin-inline:auto;
}
.term__head{
  height:30px;
  border-bottom:1px solid var(--accent);
  background:var(--panel-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:12px;
}
.term__ttl{ color:var(--accent-tx); font-size:.78rem; }
.term__dots{ display:flex; gap:5px; }
.term__dots i{ width:11px; height:11px; background:var(--line); display:block; }
.term__dots i:last-child{ background:var(--accent); }
.term__body{
  padding:clamp(14px,2.4vh,20px) clamp(14px,2.2vw,22px);
  font-size:.82rem;
  line-height:1.75;
}
.term__line{ color:var(--muted); }
.term__cmd{ color:var(--text); }
.term__cmd::before{ content:"$ "; color:var(--accent-tx); }
.term__out{ color:var(--muted); }
.term__out::before{ content:"> "; color:var(--dim); }
.term__skills{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0 4px;
}
.term__skills span{
  border:1px solid var(--line);
  background:var(--panel-3);
  color:var(--text-2);
  font-size:.7rem;
  letter-spacing:.06em;
  padding:4px 9px;
}
.term__await{ color:var(--text); }
.term__await::before{ content:"$ "; color:var(--accent-tx); }
.term__await::after{
  content:"█";
  color:var(--accent);
  margin-left:4px;
  animation:blink 1s step-end infinite;
}

/* Los 3 accesos */
.gates{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(10px,1.6vh,14px);
  max-width:920px;
  width:100%;
  margin-inline:auto;
}
@media (min-width:900px){
  .gates{ grid-template-columns:repeat(3,1fr); gap:16px; }
}

.gate{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  overflow:hidden;
  transition:background .15s var(--ease), border-color .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.gate__num{
  position:absolute;
  top:10px; right:12px;
  font-family:"Space Mono","JetBrains Mono",monospace;
  font-size:.68rem;
  color:var(--dim);
  transition:color .15s var(--ease);
}
.gate__icon{
  flex:0 0 auto;
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--accent-tx);
  transition:all .15s var(--ease);
}
.gate__icon svg{ width:24px; height:24px; }
.gate__title{
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.1;
}
.gate__sub{
  display:block;
  color:var(--muted);
  font-size:.74rem;
  margin-top:3px;
  letter-spacing:.02em;
}
.gate__arrow{ margin-left:auto; color:var(--dim); transition:all .15s var(--ease); }
.gate__arrow svg{ width:20px; height:20px; display:block; }
.gate__bar{
  position:absolute;
  left:0; bottom:0;
  height:3px; width:100%;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}

.gate:hover,
.gate:focus-visible{
  border-color:var(--accent);
  background:var(--panel-2);
  outline:none;
}
.gate:hover .gate__icon,
.gate:focus-visible .gate__icon{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.gate:hover .gate__num,
.gate:focus-visible .gate__num{ color:var(--accent-tx); }
.gate:hover .gate__arrow,
.gate:focus-visible .gate__arrow{ color:var(--accent-tx); transform:translateX(4px); }
.gate:hover .gate__bar,
.gate:focus-visible .gate__bar{ transform:scaleX(1); }
.gate:active{ background:var(--accent); color:var(--accent-ink); }
.gate:active .gate__title,
.gate:active .gate__sub,
.gate:active .gate__num{ color:var(--accent-ink); }

/* PC: panel lateral visible, accesos en columna vertical */
@media (min-width:900px){
  .side{ display:flex; }
  .home__canvas{ margin-left:240px; }
  .gate{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    min-height:190px;
    padding:22px;
  }
  .gate__icon{ width:52px; height:52px; margin-bottom:auto; }
  .gate__arrow{ position:absolute; right:22px; bottom:22px; margin-left:0; }
  .gate__title{ font-size:1.16rem; }
}

/* Móvil: panel de skills más compacto y pie en flujo normal.
   En móvil el pie NO es fijo: fluye tras el contenido para no solaparse con los
   accesos en pantallas bajas. En teléfonos normales (≈812px) sigue cabiendo sin
   scroll; en pantallas muy cortas se desplaza un poco, que es lo esperable. */
@media (max-width:899px){
  .home{ min-height:calc(100svh - 40px); padding-bottom:0; }   /* reserva el pie */
  .home__canvas{
    min-height:calc(100svh - 40px - 56px);   /* menos topbar fijo y pie en flujo */
    justify-content:center;
    gap:16px;
    padding-block:18px;
  }
  .bar--bottom{ position:static; width:100%; }
  .term__body{ font-size:.76rem; line-height:1.6; padding:12px 14px; }
  .term__skills{ gap:6px; }
  .term__skills span{ font-size:.66rem; padding:3px 7px; }
}

/* ============================================================
   PÁGINAS INTERNAS (con scroll)
   ============================================================ */

.page{
  position:relative;
  z-index:1;
  padding-top:56px;
}
.page .wrap{ padding-bottom:64px; }

.phead{
  padding-block:40px 30px;
  border-bottom:1px solid var(--line);
}
.phead__tag{
  color:var(--accent-tx);
  font-family:"Space Mono","JetBrains Mono",monospace;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.phead__tag::before{ content:"// "; color:var(--dim); }
.phead h1{
  font-size:clamp(1.9rem,7vw,3rem);
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:14px 0 0;
}
.phead .lead{
  max-width:64ch;
  color:var(--muted);
  font-size:.98rem;
  margin:14px 0 0;
}
.phead .lead b{ color:var(--text); font-weight:700; }

.section{ padding-block:36px; }
.sec-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-tx);
  font-family:"Space Mono","JetBrains Mono",monospace;
  margin:0 0 20px;
}
.sec-title::before{ content:"["; color:var(--dim); }
.sec-title::after{
  content:"]";
  color:var(--dim);
}
.sec-title span{ flex:1; height:1px; background:var(--line); }

/* Tarjeta genérica */
.cards{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:680px){
  .cards{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .cards--3{ grid-template-columns:repeat(3,1fr); }
}
.card{
  border:1px solid var(--line);
  background:var(--panel);
  padding:18px;
  transition:border-color .15s var(--ease);
}
.card:hover{ border-color:var(--accent); }
.card h3{
  font-size:.98rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:9px;
}
.card h3::before{ content:""; width:8px; height:8px; background:var(--accent); flex:0 0 auto; }
.card p{ margin:0; color:var(--muted); font-size:.86rem; }

/* Lista técnica */
.blist{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.blist li{ position:relative; padding-left:24px; color:var(--muted); font-size:.9rem; }
.blist li::before{ content:">"; position:absolute; left:4px; top:0; color:var(--accent-tx); font-weight:700; }
.blist b{ color:var(--text); font-weight:700; }
.blist i{ color:var(--text-2); font-style:italic; }

/* Chips / stack */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.chips li{
  border:1px solid var(--line);
  background:var(--panel-3);
  color:var(--text-2);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:6px 11px;
}
.chips li:hover{ border-color:var(--accent); color:var(--accent-tx); }

/* Ficha de proyecto */
.proj{
  border:1px solid var(--line);
  background:var(--panel);
  padding:clamp(18px,4vw,26px);
  transition:border-color .15s var(--ease);
}
.proj + .proj{ margin-top:14px; }
.proj:hover{ border-color:var(--accent); }
.proj__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}
.proj__name{ font-size:clamp(1.2rem,4.5vw,1.5rem); text-transform:uppercase; letter-spacing:.01em; }
.proj__kind{ margin:4px 0 0; color:var(--dim); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.proj__badge{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--accent);
  background:transparent;
  color:var(--accent-tx);
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px;
}
.proj__badge::before{ content:""; width:6px; height:6px; background:var(--accent); }
.proj__badge--soft{ border-color:var(--line); color:var(--muted); }
.proj__badge--soft::before{ background:var(--muted); }
.proj__desc{ margin:0 0 16px; color:var(--muted); font-size:.9rem; }
.proj__desc b{ color:var(--text); font-weight:700; }
.proj__feats{ margin-bottom:18px; }
.proj__feats li{ font-size:.86rem; }
.proj__stack{ margin-bottom:20px; }
.proj__links{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:520px){ .proj__links .btn{ width:100%; } .proj__head{ flex-direction:column; gap:10px; } }

/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:0 20px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-family:inherit;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn svg{ width:17px; height:17px; }
.btn:hover{ border-color:var(--accent); color:var(--accent-tx); background:var(--panel-2); }
.btn--primary{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--accent-ink);
}
.btn--primary:hover{ background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent-ink); }
.btn:active{ transform:translateY(1px); }

.btnrow{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
@media (max-width:520px){ .btnrow .btn{ width:100%; } }

/* Aviso / nota */
.note{
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  background:var(--panel);
  padding:16px 18px;
  color:var(--muted);
  font-size:.88rem;
}
.note b{ color:var(--text); }
.note p{ margin:0 0 10px; }
.note p:last-child{ margin-bottom:0; }

/* Bloque de descarga */
.dl{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--accent);
  background:var(--panel);
  padding:18px 20px;
}
.dl__title{ margin:0 0 4px; font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text); }
.dl__meta{ margin:0; font-size:.76rem; color:var(--muted); }
.dl__btn{ flex:0 0 auto; }
.dl__note{ margin:14px 0 0; font-size:.8rem; line-height:1.55; color:var(--dim); }
.dl__note b{ color:var(--muted); }
@media (max-width:800px){
  .dl{ flex-direction:column; align-items:stretch; text-align:center; }
  .dl__btn{ width:100%; }
}

/* CTA */
.cta{
  border:1px solid var(--line);
  background:var(--panel);
  padding:30px 24px;
  text-align:center;
  margin-block:24px 40px;
}
.cta h2{ font-size:1.3rem; text-transform:uppercase; letter-spacing:.02em; margin:0 0 10px; }
.cta p{ color:var(--muted); margin:0 0 22px; font-size:.9rem; }

.foot{
  border-top:1px solid var(--line);
  padding-block:22px;
  margin-top:8px;
  display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:center;
  font-size:.76rem; color:var(--dim);
}
.foot a{ color:var(--muted); }
.foot a:hover{ color:var(--accent-tx); }

/* ---------- Revelado ---------- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  body::after{ display:none; }
  .reveal{ opacity:1; transform:none; }
}