/* ===== Variables and base ===== */
:root{
  --bg-top: #081311;
  --bg-bottom: #003546;
  --accent: #dabd8d;
  --muted: #c7d2d6;
  --card: #152428;
  --card-2: #223238;
  --glass: rgba(255,255,255,0.04);
  --shadow: 0 8px 22px rgba(0,0,0,0.45);

  --max-width: 1200px;
  --gap: 28px;
  --radius: 12px;
  --font: 'IBM Plex Mono', monospace;
}

/* avoid horizontal scroll */
html,body { height:100%; overflow-x:hidden; }
* { box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--font);
  color: #e6eef0;
  -webkit-font-smoothing:antialiased;
  background: linear-gradient(180deg, var(--bg-top) 0%, #00090b 9%, var(--bg-bottom) 100%);
  padding: 100px;
  line-height:1.45;
}

/* Page layout - responsive grid */
.page{
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: var(--gap);
  align-items:start;
}

/* Desktop: two-column (main + side chat) */
@media(min-width: 1100px){
  .page{
    grid-template-columns: 1fr 380px;
    align-items:start;
  }
}

/* Tablet: two columns but narrower side */
@media(min-width: 768px) and (max-width:1099px){
  .page{
    grid-template-columns: 1fr 360px;
  }
}

/* Mobile: single column */
@media(max-width:767px){
  .page{
    grid-template-columns: 1fr;
  }
}

/* ===== Main column (profile + timeline) ===== */
.main-col{
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0));
  border-radius: 16px;
  box-shadow: var(--shadow);
  min-height: 320px;
  overflow: visible;
}

/* Profile header */
.profile .profile-top{
  display:flex;
  gap:18px;
  align-items:center;
}

.avatar{
  width:130px;
  height:130px;
  border-radius:50%;
  object-fit:cover;
  border: 6px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  flex-shrink:0;
}

/* Meta text */
.name{
  margin:0;
  font-size:1.8rem;
  letter-spacing:1px;
  color: #f5f7f8;
}

.role{
  margin:6px 0 0 0;
  color: var(--muted);
  font-size:0.98rem;
}

.experience{
  color: var(--accent);
  margin-left:8px;
}

/* Badges / chips */
.skill-badges{ margin-top:10px; display:flex; gap:8px; align-items:center; }
.badge{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:10px;
  font-weight:700;
  color:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  transform-origin:center;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
}
.badge:hover{ transform: translateY(-6px) scale(1.03); }

.badge-red{ background: #e23a3a; }
.badge-blue{ background: #3a89e2; }
.badge-pink{ background: #e29acb; }
.badge-navy{ background: #2a4ee2; }

.chips{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.chips span{
  background: rgba(0,0,0,0.25);
  padding:6px 10px;
  border-radius:999px;
  color: #c9d6d9;
  font-size:0.85rem;
  border: 1px solid rgba(255,255,255,0.02);
}

/* Bio text */
.bio{
  margin-top:18px;
  color:#bfcfd1;
  max-width: 70ch;
  font-size:0.98rem;
}

/* ===== Timeline (stacked, normal flow) ===== */
.vertical-timeline { margin-top: 28px; }

.carousel-title {
  margin: 0 0 12px 0;
  color: #f9f5ef;
  font-size: 1.25rem;
}

/* list wrapper */
.timeline-list { width:100%; }

/* each timeline item */
.timeline-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:16px;
  margin-bottom:18px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border: 1px solid rgba(255,255,255,0.02);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.9,.2,1);
}

/* when visible */
.timeline-item.show {
  opacity: 1;
  transform: translateY(0);
}

.slide-media {
  min-width: 150px;
  width: 150px;
  max-height: 110%;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0e2b28;
}
.slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.timeline-body h3{
  margin:0;
  color: #ffb36b;
  font-size:1.05rem;
}
.timeline-body p{ margin-top:8px; color:#cfe1e3; line-height:1.45; }

/* ===== Side column (chat) ===== */
.side-col{
  padding:18px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height: 380px;
}

/* Chat header */
.chat-header{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.chat-header h2{ margin:0; font-size:1.1rem; color:#e9f0f1; }
.chat-header .seen{ font-size:0.85rem; color:#9fb0b2; }

/* Chat window */
.chat-window{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  padding:12px;
  border-radius:12px;
  overflow-y:auto;
  min-height:220px;
  max-height:420px;
  display:flex;
  flex-direction:column;
  gap:12px;
  border: 1px solid rgba(255,255,255,0.02);
}

/* Message bubbles */
.msg{
  display:flex;
  gap:10px;
  align-items:flex-end;
  max-width:85%;
  animation: fadeInUp 420ms ease forwards;
}
.msg .bubble{
  padding:10px 12px;
  border-radius:12px;
  font-size:0.92rem;
  background: var(--card);
  color:#e8f0f1;
  box-shadow: 0 6px 12px rgba(0,0,0,0.35);
  position:relative;
}
.msg .meta{ display:block; margin-top:8px; font-size:0.75rem; color:#9fb0b2; }

.msg.left{ align-self:flex-start; }
.msg.left .bubble{ background: #161f23; }
.msg.right{ align-self:flex-end; flex-direction:row-reverse; }
.msg.right .bubble{ background: #d8e6c2; color:#09201c; }


/* avatar-small using background-image, adjustable vertical position */
.avatar-small{
  width:36px;
  height:36px;
  aspect-ratio: 1 / 1;
  border-radius:50%;
  background-color:#0e2b28;
  background-size: cover;                /* crop but no distortion */
  background-position: center var(--avatar-pos, 50%); /* default center */
  background-repeat: no-repeat;
  border:3px solid rgba(0,0,0,0.25);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  display:inline-block;
  vertical-align:middle;
}
/* ===== Small avatar IMAGE (generated) ===== */
.avatar-small-img{
  width:36px;
  height:36px;
  aspect-ratio:1/1;
  border-radius:50%;
  object-fit:cover;               /* mantiene proporciones y recorta sin distorsión */
  object-position:50% 40%;        /* X% Y% -> ajusta Y% si quieres mostrar más arriba/abajo */
  border:3px solid rgba(0,0,0,0.25);
  box-shadow:0 3px 8px rgba(0,0,0,0.25);
  display:inline-block;
  vertical-align:middle;
}
/* ensure generated small images are transparent until painted and transition smoothly */
.avatar-small-img{
  background-color: transparent;
  display:inline-block;
  vertical-align:middle;
  opacity:1; /* JS will set to 0 before load and to 1 after load */
}



/* contact form */
.contact-form{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:auto;
  padding-top:6px;
}
.contact-form input{
  flex:1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.03);
  padding:10px 12px;
  border-radius:10px;
  color: #e9f0f1;
  outline:none;
  font-family:var(--font);
}
.contact-form button{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  color: #d8e6c2;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}

/* responsive adjustments */
@media (max-width: 767px) {
  .slide-media { width: 120px; }
  .avatar{ width:92px; height:92px; }
  .name{ font-size:1.4rem; }
  .chat-window{ max-height:260px; min-height:160px; }
  .side-col{ order:2; }
  .main-col{ order:1; }
  .page { padding: 18px; }
}
@media (min-width: 1100px) {
  .slide-media { width: 180px; }
}

/* small animations */
@keyframes fadeInUp {
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}
.fade-in{ animation: fadeInUp 420ms ease both; }
.fade-in.delay{ animation-delay:120ms; }

/* Accessibility helpers */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);
}

/* Scrollbar styling */
.chat-window::-webkit-scrollbar{ width:10px; }
.chat-window::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.04); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }

/* ========== Disable timeline fade (force visible, no transitions) ========== */
/* Paste this after your existing timeline CSS rules */
.timeline-item {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* also neutralize any .show class used for reveal */
.timeline-item.show {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* if you used a .reveal class anywhere on the timeline, neutralize it too */
.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}