/* styles.css - CV Web */
:root{
  --bg:#0f172a;
  --panel:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent2:#38bdf8;
  --border:#1f2937;
  --paper:#0b1220;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(120deg,var(--bg),#0b1228 40%,var(--bg));min-height:100%;color:var(--text);font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}

a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}

/* Barra tipo navegador */
.browser-bar{
  position:fixed;top:0;left:0;right:0;height:42px;
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:#0b1220;border-bottom:1px solid var(--border);z-index:1000;
}
.browser-bar .dot{width:12px;height:12px;border-radius:999px;display:inline-block}
.browser-bar .dot.red{background:#ef4444}
.browser-bar .dot.yellow{background:#f59e0b}
.browser-bar .dot.green{background:#22c55e}
.browser-bar .bar-title{margin-left:6px;color:var(--muted);font-size:13px}

.site-header{
  margin-top:62px; /* deja espacio para la barra fija */
  display:flex;gap:24px;align-items:center;justify-content:flex-start;
  padding:20px;border-bottom:1px solid var(--border);background:var(--paper);
}
.avatar-wrap{position:relative;width:140px;min-width:140px}
.avatar{width:140px;height:140px;border-radius:12px;object-fit:cover;border:2px solid var(--border)}
.badge{
  position:absolute;right:-8px;bottom:-8px;background:var(--accent);
  color:#032412;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;border:2px solid #0c1c14;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.identity h1{margin:0 0 6px 0;font-size:28px}
.identity .role{margin:0 0 10px 0;color:var(--muted)}
.contacto{list-style:none;margin:0;padding:0;display:grid;gap:4px}

/* Layout principal: Flexbox */
.container{
  display:flex;gap:24px;padding:20px;align-items:flex-start;
}
.sidebar{
  position:sticky;top:70px; /* position: sticky aplicada */
  width:280px;min-width:260px;background:var(--paper);border:1px solid var(--border);
  border-radius:12px;padding:16px;height:fit-content;
}
.sidebar h2{font-size:14px;letter-spacing:.08em;color:var(--muted);margin:10px 0 8px 0}
.sidebar ul{margin:0 0 14px 18px;padding:0}
.sidebar li{margin:4px 0}

.content{
  flex:1;background:var(--paper);border:1px solid var(--border);border-radius:12px;padding:18px;
}
.block{margin-bottom:22px}
.block h2{margin:0 0 8px 0;border-bottom:1px dashed var(--border);padding-bottom:6px;color:#d1d5db}
.job header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.job .meta{color:var(--muted);font-size:13px}
.job ul{margin:8px 0 14px 18px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery figure{margin:0;background:#0a0f1d;border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.gallery figcaption{color:var(--muted);font-size:13px;margin-top:6px}

.site-footer{
  margin:12px 0 40px;display:flex;flex-direction:column;align-items:center;gap:10px
}
.social{list-style:none;display:flex;gap:16px;margin:8px 0 0 0;padding:0}
.social li a svg{width:24px;height:24px;fill:var(--text);opacity:.8;transition:opacity .2s ease}
.social li a:hover svg{opacity:1}

@media (max-width: 860px){
  .container{flex-direction:column}
  .sidebar{position:static;width:auto}
}