:root{
  --bg:#0f1720;
  --panel-bg:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));
  --text:#cbd5e1;
  --muted:#8a7aa0;
  --accent:#d18b46;
  --role:#9bcf84;
  --line:rgba(209,139,70,0.12);
  --shadow:0 20px 50px rgba(0,0,0,0.7);
}

[data-theme="light"]{
  --bg:#f5f7fb;
  --panel-bg:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(255,255,255,0.6));
  --text:#1e293b;
  --muted:#64748b;
  --accent:#d18b46;
  --role:#2f855a;
  --line:rgba(209,139,70,0.18);
  --shadow:0 16px 40px rgba(15,23,42,0.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family:"Fira Code", monospace;
  color:var(--text);
  padding:28px 18px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  font-size:14px;
  line-height:1.55;
}
.panel{
  width:960px;
  background:var(--panel-bg);
  border-top:3px solid var(--accent);
  border-bottom:3px solid var(--accent);
  padding:32px;
  box-shadow:var(--shadow);
  border-radius:6px;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.cmd{color:var(--accent);font-size:13px;}
.cmd-button{
  font-family:"Fira Code", monospace;
  font-size:12px;
  padding:6px 12px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.06);
  color:var(--accent);
  cursor:pointer;
  transition:all .2s ease;
}
.cmd-button:hover{
  border-color:rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.12);
}
.cmd-button[disabled]{
  opacity:0.6;
  cursor:progress;
}
.cmd-button[data-loading="true"]::after{
  content:" …";
}
.toggles{display:flex;gap:12px;align-items:center;}
.toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:var(--muted);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  transition:all .25s ease;
}
.toggle:hover{color:var(--text);border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);}
[data-theme="light"] .toggle{
  border-color:rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.6);
}
[data-theme="light"] .toggle:hover{
  border-color:rgba(15,23,42,0.14);
  background:rgba(255,255,255,0.8);
  color:var(--text);
}
.toggle .material-icons.arrow{font-size:18px;}
.lang-switcher{position:relative;}
.dropdown{
  position:absolute;
  top:100%;
  right:0;
  margin-top:6px;
  background:rgba(10,18,24,0.96);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:6px;
  display:none;
  min-width:160px;
  box-shadow:0 16px 40px rgba(0,0,0,0.4);
  backdrop-filter:blur(8px);
  z-index:10;
}
[data-theme="light"] .dropdown{
  background:rgba(255,255,255,0.95);
  border-color:rgba(15,23,42,0.08);
  box-shadow:0 20px 40px rgba(15,23,42,0.1);
}
.dropdown.open{display:block;}
.dropdown-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  transition:background .2s ease;
}
.dropdown-item:hover{background:rgba(255,255,255,0.06);}
[data-theme="light"] .dropdown-item:hover{background:rgba(15,23,42,0.08);}
.dropdown-item.active{background:rgba(209,139,70,0.18);color:var(--text);}
[data-theme="light"] .dropdown-item.active{background:rgba(209,139,70,0.22);}
.flag{
  width:18px;
  height:18px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  flex-shrink:0;
}
.flag-es{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="2" fill="%23AA151B"/><rect width="3" height="1" y="0.5" fill="%23F1BF00"/></svg>');}
.flag-en{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="2" fill="%23012A87"/><path d="M0 0l3 2M3 0L0 2" stroke="%23fff" stroke-width="0.3"/><path d="M0 0l3 2M3 0L0 2" stroke="%23C8102E" stroke-width="0.15"/><path d="M1.35 0h0.3v2h-0.3zM0 0.85h3v0.3H0z" fill="%23fff"/><path d="M1.4 0h0.2v2h-0.2zM0 0.9h3v0.2H0z" fill="%23C8102E"/></svg>');}
.toggle-theme{
  padding:6px 12px;
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
}
.toggle-theme .sun,
.toggle-theme .moon{
  width:20px;
  height:20px;
  border-radius:50%;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:var(--accent);
}
.toggle-theme .sun::before{content:"\2600";}
.toggle-theme .moon::before{content:"\1F319";}
.toggle-theme .moon{display:inline-flex;color:#9fd0ff;}
[data-theme="light"] .toggle-theme .moon{display:none;}
[data-theme="light"] .toggle-theme .sun{display:inline-flex;color:#f97316;}
.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;
}
.panel-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.person{text-align:right}
.name{
  margin:0;
  font-size:20px;
  letter-spacing:0.6px;
  color:var(--text);
}
.role{color:var(--role);margin-top:6px;font-size:13px;}
.contact{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  color:var(--muted);
  margin:8px 0 12px;
  font-size:13px;
}
.muted{color:var(--muted);}
.contact a{color:var(--muted);text-decoration:none;}
.sep{color:var(--muted);}
.rule{height:1px;background:var(--line);margin:14px 0;border-radius:2px;}
.section-title{
  text-align:center;
  margin:16px 0;
  position:relative;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}
.section-title span{background:linear-gradient(90deg, rgba(11,21,25,0.9), rgba(11,21,25,0.9));padding:0 12px;}
[data-theme="light"] .section-title span{background:linear-gradient(90deg, rgba(245,247,251,0.92), rgba(245,247,251,0.92));}
.summary{color:var(--text);margin-bottom:8px;font-size:14px;padding:0 6px;white-space: pre-line;}
.summary p{margin:0;}
.experience{margin-top:6px;}
.job{
  display:flex;
  gap:24px;
  margin:18px 0;
  align-items:flex-start;
}
.job-left{flex:1;padding-right:12px;}
.job-right{width:160px;text-align:right;color:var(--muted);font-size:13px;}
.job-head{display:flex;gap:12px;align-items:center;margin-bottom:6px;}
.icon,
.job-logo{
  width:44px;
  height:44px;
  border-radius:6px;
  background:rgba(255,255,255,0.02);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--accent);
  flex-shrink:0;
}
.job-logo{background:rgba(255,255,255,0.04);object-fit:contain;padding:6px;}
.company{font-weight:700;color:var(--text);font-size:15px;}
.position{color:var(--role);font-size:13px;margin-top:2px;}
.job-desc{margin:6px 0 10px;color:var(--text);opacity:0.95;}
.bullets{list-style:none;padding-left:0;margin:0;color:var(--text);}
.bullets li{margin:8px 0;display:flex;gap:10px;align-items:flex-start;color:var(--text);}
.bullets .material-icons{font-size:18px;color:var(--role);margin-top:2px;}
.education{margin-top:6px;}
.edu{display:flex;gap:12px;margin:14px 0;align-items:center;}
.edu-left{flex:1;}
.institution{font-weight:700;color:var(--text);}
.degree{color:var(--muted);margin-top:4px;font-size:13px;}
.edu-right{width:180px;text-align:right;color:var(--muted);font-size:13px;}
.skills{margin-top:6px;display:flex;flex-direction:column;gap:18px;}
.skill-block{padding:6px 0;}
.skill-category{margin:0 0 8px;color:var(--muted);font-size:13px;}
.skill{margin:8px 0;}
.skill-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:12px;}
.skill-meta .label{display:flex;align-items:center;gap:10px;}
.skill-icon{width:22px;height:22px;border-radius:4px;object-fit:contain;background:rgba(255,255,255,0.04);padding:2px;}
.skill-name{color:var(--text);font-size:13px;}
.skill-level{color:var(--muted);font-size:12px;}
.bar{height:10px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden;}
.fill{height:100%;background:linear-gradient(90deg, var(--role), var(--accent));border-radius:999px;transition:width .5s ease;}
.fill.lvl-10{width:100%;}
.fill.lvl-9{width:90%;}
.fill.lvl-8{width:80%;}
.fill.lvl-7{width:70%;}
.fill.lvl-6{width:60%;}
.fill.lvl-5{width:50%;}
.fill.lvl-4{width:40%;}
.fill.lvl-3{width:30%;}
.fill.lvl-2{width:20%;}
.fill.lvl-1{width:10%;}

.languages{display:flex;flex-direction:column;gap:10px;padding:0 6px;margin-top:6px;}
.language-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);}
[data-theme="light"] .language-item{background:rgba(255,255,255,0.85);border-color:rgba(15,23,42,0.08);}
.language-name{font-weight:600;color:var(--text);}
.language-level{color:var(--muted);font-size:13px;}

.references{display:grid;gap:16px;margin-top:6px;}
.reference-card{padding:16px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);box-shadow:0 16px 40px rgba(0,0,0,0.2);}
[data-theme="light"] .reference-card{background:rgba(255,255,255,0.92);border-color:rgba(15,23,42,0.08);box-shadow:0 16px 36px rgba(15,23,42,0.12);}
.reference-header{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.reference-name{font-weight:600;color:var(--text);font-size:14px;}
.reference-role,.reference-company{font-size:12px;}
.reference-relationship{margin:0 0 10px;color:var(--text);font-size:13px;}
.reference-contact{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;align-items:center;}
.reference-email{color:var(--accent);text-decoration:none;}
.reference-phone{color:var(--muted);}
.reference-sep{color:var(--muted);}

.projects{display:grid;gap:16px;margin-top:6px;}
.project-card{padding:16px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);box-shadow:0 14px 34px rgba(0,0,0,0.18);}
[data-theme="light"] .project-card{background:rgba(255,255,255,0.94);border-color:rgba(15,23,42,0.08);box-shadow:0 14px 30px rgba(15,23,42,0.1);}
.project-header{margin-bottom:6px;font-weight:600;}
.project-link{color:var(--accent);text-decoration:none;}
.project-link:hover{text-decoration:underline;}
.project-name{color:var(--text);}
.project-description{margin:0;color:var(--muted);font-size:13px;line-height:1.5;}
.panel-footer{margin-top:20px;text-align:center;font-size:12px;color:var(--muted);}
.panel-footer a{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent);padding-bottom:1px;}
[data-theme="light"] .panel-footer a{border-color:rgba(209,139,70,0.4);}
@media(max-width:980px){
  .panel{width:100%;padding:24px;}
  .job-right,.edu-right{width:140px;font-size:12px;}
  .name{font-size:18px;}
}
@media(max-width:680px){
  body{padding:18px 12px;}
  .panel{padding:18px;}
  .panel-header{flex-direction:column;align-items:flex-start;gap:6px;}
  .person{text-align:left;}
  .contact{justify-content:flex-start;flex-wrap:wrap;}
  .job{flex-direction:column;}
  .job-right,.edu-right{width:auto;text-align:left;margin-top:8px;color:var(--muted);}
}
