/* ═══════════════════════════════════════════
   CV ARCHITECT AI — style.css (base compartida)
   Editorial blue · Fraunces + Manrope + Plex
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ─── VARIABLES ─── */
:root {
  --paper:        #f7f8fc;
  --paper-warm:   #eff1f8;
  --paper-cool:   #e8ecf4;
  --white:        #fff;
  --ink:          #111827;
  --ink-light:    #374151;
  --ink-muted:    #6b7280;
  --ink-faint:    #b0b8c8;
  --rule:         #d5dae4;
  --rule-dark:    #b8c0d0;
  --blue:         #2554a8;
  --blue-deep:    #1a3d7c;
  --blue-light:   #3b6fd4;
  --blue-pale:    #e6edf8;
  --blue-wash:    rgba(37,84,168,0.06);
  --blue-grad:    linear-gradient(135deg, #1a3d7c, #3b82f6);
  --blue-grad-h:  linear-gradient(135deg, #1e4690, #60a5fa);
  --green:        #16854a;
  --green-bg:     #e2f5eb;
  --amber:        #a07820;
  --amber-bg:     #faf3e0;
  --red:          #c23a2a;
  --red-bg:       #fce8e6;
  --serif:        'Fraunces', serif;
  --sans:         'Manrope', sans-serif;
  --mono:         'IBM Plex Mono', monospace;
  --page-px:      clamp(20px, 4vw, 60px);
  --page-max:     1100px;
}

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;min-height:100vh}
::selection{background:var(--blue);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ─── TOPBAR ─── */
.topbar{position:sticky;top:0;z-index:50;background:rgba(247,248,252,0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;padding:0 var(--page-px);height:52px}
.topbar-brand{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.topbar-brand .mark{width:24px;height:24px;background:var(--blue-grad);border-radius:6px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700}
.topbar-nav{display:flex;align-items:center;gap:20px;font-family:var(--mono);font-size:12px}
.topbar-nav a{color:var(--ink-muted);text-decoration:none;transition:color .2s}
.topbar-nav a:hover{color:var(--ink)}
.topbar-nav .sep{color:var(--rule)}
.topbar-nav .current{color:var(--ink);font-weight:500}
.btn-back{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-muted);text-decoration:none;padding:6px 16px;border:1px solid var(--rule);border-radius:6px;transition:all .2s}
.btn-back:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-wash)}

/* ─── WIZARD TABS (perfil, pitch, reflexion) ─── */
.wizard-tabs{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-px);border-bottom:1px solid var(--rule);display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wizard-tabs::-webkit-scrollbar{display:none}
.wtab{font-family:var(--mono);font-size:12px;padding:14px 18px;color:var(--ink-muted);cursor:pointer;border:none;background:none;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s;display:flex;align-items:center;gap:8px}
.wtab:hover{color:var(--ink)}
.wtab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:500}
.wtab .num{width:20px;height:20px;border-radius:50%;background:var(--paper-warm);display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--ink-muted)}
.wtab.active .num{background:var(--blue);color:#fff}
.wtab.done .num{background:var(--green-bg);color:var(--green)}

/* ─── PAGE SECTION ─── */
.page-section{max-width:var(--page-max);margin:0 auto;padding:clamp(40px,6vw,64px) var(--page-px)}
.step-overline{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-muted);margin-bottom:14px}
.step-overline span{color:var(--blue)}
.step-title{font-family:var(--serif);font-weight:900;font-size:clamp(32px,5vw,48px);line-height:1;letter-spacing:-1px;margin-bottom:12px}
.step-title em{font-style:italic;font-weight:400;background:var(--blue-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.step-desc{font-size:15px;color:var(--ink-light);max-width:560px;line-height:1.7;margin-bottom:36px}

/* ─── FORM ELEMENTS ─── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form-grid.full{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column}
.form-label{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-muted);margin-bottom:6px}
.form-input,.form-select,.form-textarea{width:100%;padding:12px 16px;border:1px solid var(--rule);border-radius:6px;background:var(--white);font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,84,168,.08)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink-faint)}
.form-textarea{min-height:110px;resize:vertical;line-height:1.75}
.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* ─── BUTTONS ─── */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;border:none;border-radius:8px;background:var(--blue-grad);color:#fff;font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer;transition:all .25s;box-shadow:0 2px 12px rgba(37,84,168,.18)}
.btn-primary:hover{background:var(--blue-grad-h);transform:translateY(-1px);box-shadow:0 4px 20px rgba(37,84,168,.25)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--rule);border-radius:6px;background:var(--white);color:var(--ink-muted);font-family:var(--mono);font-size:12px;cursor:pointer;transition:all .15s}
.btn-secondary:hover{color:var(--blue);border-color:var(--blue)}
.btn-ia{font-family:var(--mono);font-size:11px;padding:5px 14px;border:1px solid var(--blue);border-radius:4px;background:var(--blue-pale);color:var(--blue);cursor:pointer;transition:all .15s}
.btn-ia:hover{background:var(--blue);color:#fff}

/* ─── STEP NAVIGATION ─── */
.step-nav{display:flex;justify-content:flex-end;gap:12px;padding:32px 0;max-width:var(--page-max);margin:0 auto;padding-left:var(--page-px);padding-right:var(--page-px)}

/* ─── SECTION DIVIDERS ─── */
.section-divider{border:none;border-top:1px solid var(--rule);margin:28px 0}

/* ─── SECTION HEADERS ─── */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sec-label{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-muted)}

/* ─── ITEM CARDS (experience, education, projects) ─── */
.item-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.item-card{border:1px solid var(--rule);border-radius:8px;padding:16px 18px;background:var(--white);position:relative;transition:border-color .15s}
.item-card:hover{border-color:var(--rule-dark)}
.item-card .it{font-weight:600;font-size:15px}
.item-card .is{font-size:13px;color:var(--ink-light)}
.item-card .id{font-family:var(--mono);font-size:11px;color:var(--ink-muted)}
.item-card .ix{font-size:13px;color:var(--ink-muted);margin-top:6px;line-height:1.6}
.item-rm{position:absolute;top:12px;right:12px;width:24px;height:24px;border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--ink-faint);font-size:12px;cursor:pointer;display:grid;place-items:center;transition:all .15s}
.item-rm:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)}
.btn-add{width:100%;padding:12px;border:1px dashed var(--rule);border-radius:6px;background:transparent;color:var(--ink-muted);font-family:var(--mono);font-size:12px;cursor:pointer;transition:all .15s}
.btn-add:hover{border-color:var(--blue);color:var(--blue)}
.empty-state{text-align:center;padding:28px;color:var(--ink-faint);font-size:13px;font-style:italic}

/* ─── SKILL TAGS ─── */
.skills-wrap{display:flex;flex-wrap:wrap;gap:6px;min-height:42px;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--white);transition:border-color .2s}
.skills-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,84,168,.08)}
.sk-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--rule);border-radius:4px;font-family:var(--mono);font-size:12px;color:var(--ink-light);background:var(--paper-warm)}
.sk-tag .rm{cursor:pointer;color:var(--ink-faint);font-size:10px;transition:color .15s}
.sk-tag .rm:hover{color:var(--red)}
.sk-input{border:none;background:none;font-family:var(--mono);font-size:12px;color:var(--ink);outline:none;flex:1;min-width:100px;padding:4px}
.sk-input::placeholder{color:var(--ink-faint)}

/* ─── MODAL ─── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(17,24,39,.3);backdrop-filter:blur(6px);z-index:200;align-items:center;justify-content:center}
.modal-bg.on{display:flex}
.modal{background:var(--white);border:1px solid var(--rule);border-radius:10px;width:90%;max-width:480px;padding:28px;box-shadow:0 8px 40px rgba(0,0,0,.12)}
.modal-title{font-family:var(--serif);font-weight:700;font-size:20px;margin-bottom:20px}
.modal-field{margin-bottom:12px}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.btn-m{font-family:var(--mono);font-size:12px;padding:8px 20px;border-radius:6px;border:1px solid var(--rule);cursor:pointer;transition:all .15s}
.btn-m.cancel{background:transparent;color:var(--ink-muted)}
.btn-m.ok{background:var(--blue-grad);color:#fff;border:none}
.btn-m.ok:hover{box-shadow:0 2px 12px rgba(37,84,168,.25)}

/* ─── TIMER BOX (pitch) ─── */
.timer-box{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:24px 28px;margin-bottom:32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.timer-display{font-family:var(--serif);font-weight:700;font-size:32px;line-height:1}
.timer-sub{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-muted);margin-top:2px}
.timer-msg{font-size:14px;color:var(--ink-muted)}
.timer-btns{display:flex;gap:10px}

/* ─── FOOTER ─── */
.footer{max-width:var(--page-max);margin:0 auto;padding:40px var(--page-px);display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-muted)}
.footer a{color:var(--blue);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ─── ANIMATIONS ─── */
@keyframes revealUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(24px)}
.reveal.visible{animation:revealUp .65s cubic-bezier(.22,1,.36,1) forwards}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .topbar-nav{display:none}
  .footer{flex-direction:column;gap:8px;text-align:center}
  .form-grid{grid-template-columns:1fr}
  .wizard-tabs{padding:0 12px}
  .wtab{padding:12px 12px;font-size:11px}
  .timer-box{flex-direction:column;text-align:center}
}