:root{
  /* Auctoritas IA — negro + rojo brasa (el rojo es acento, nunca fondo masivo) */
  --navy:#0A0A0D;
  --navy-2:#16130F;
  --navy-3:#221D18;
  --gold:#8C2F2F;
  --gold-light:#B5473A;
  --bg:#F3F4F7;
  --card:#FFFFFF;
  --text:#1B2430;
  --text-muted:#5B6572;
  --border:#E3E6EB;
  --danger:#C6402F;
  --danger-bg:#FBEAE7;
  --success:#1F7A4D;
  --success-bg:#EAF6EF;
  --radius:10px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
[hidden]{display:none !important;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:'Playfair Display',serif; margin:0;}

.shell{display:flex; min-height:100vh;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:260px;
  flex-shrink:0;
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:28px 20px;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{display:flex; align-items:center; gap:12px; padding:0 4px 28px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:20px;}
.brand-mark{
  width:40px; height:40px; border-radius:8px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--navy); font-family:'Playfair Display',serif; font-weight:700; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-name{font-family:'Playfair Display',serif; font-weight:700; font-size:19px; line-height:1.1;}
.brand-name span{color:var(--gold-light);}
.brand-sub{font-size:11.5px; color:rgba(255,255,255,.55); margin-top:3px; letter-spacing:.02em;}

.nav{display:flex; flex-direction:column; gap:6px;}
.nav-item{
  display:flex; align-items:center; gap:12px;
  background:transparent; border:none; cursor:pointer;
  text-align:left; color:rgba(255,255,255,.78);
  padding:12px 12px; border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:rgba(140,47,47,.22); color:#fff;}
.nav-item.active .nav-icon{color:var(--gold-light);}
.nav-icon{width:20px; text-align:center; font-size:15px; color:rgba(255,255,255,.5); flex-shrink:0;}
.nav-item span span{display:block;}
.nav-title{font-size:13.5px; font-weight:600;}
.nav-desc{font-size:11.5px; color:rgba(255,255,255,.45); font-weight:400; margin-top:1px;}

.sidebar-foot{margin-top:auto; font-size:11px; color:rgba(255,255,255,.35); padding-top:16px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:6px;}
.sidebar-foot #logout-btn{color:rgba(255,255,255,.5); align-self:flex-start;}
.sidebar-foot #logout-btn:hover{color:var(--gold-light);}

/* ---------- Gate de acceso (nombre + clave rotativa) ---------- */
.gate-overlay{
  position:fixed; inset:0; z-index:1000;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.gate-card{
  width:340px; max-width:100%;
  background:var(--navy-3);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:32px 28px;
  display:flex; flex-direction:column; gap:18px;
  align-items:center;
}
.gate-card .brand{border:none; padding:0; margin:0;}
.gate-sub{color:rgba(255,255,255,.55); font-size:13px; text-align:center; margin:0; font-style:italic;}
.gate-card form{width:100%; display:flex; flex-direction:column; gap:14px;}
.gate-card label{color:rgba(255,255,255,.7);}
.gate-card input{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); color:#fff;}
.gate-card input::placeholder{color:rgba(255,255,255,.3);}
.gate-card input:focus{background:rgba(255,255,255,.1);}

/* ---------- Main ---------- */
.main{flex:1; padding:40px 44px; max-width:1280px;}
.panel{display:none;}
.panel.active{display:block;}

.panel-head{margin-bottom:26px;}
.panel-head h1{font-size:26px; color:var(--navy); margin-bottom:6px;}
.panel-head p{color:var(--text-muted); font-size:14.5px; margin:0; max-width:640px;}

.grid{display:grid; grid-template-columns:minmax(360px,440px) 1fr; gap:24px; align-items:start;}
@media (max-width:980px){ .grid{grid-template-columns:1fr;} }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}

/* ---------- Forms ---------- */
.form-card{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.small{max-width:120px;}
.field-row{display:flex; gap:14px;}
.field-row .field{flex:1;}
label{font-size:12.5px; font-weight:600; color:var(--navy-2); letter-spacing:.01em;}
input[type=text],input[type=url],input[type=number],select,textarea{
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:7px;
  background:#FBFBFC;
  color:var(--text);
  resize:vertical;
  width:100%;
}
input[type=file]{font-size:13px;}
textarea{line-height:1.5;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(140,47,47,.12);}
.hint{font-size:11.5px; color:var(--text-muted);}

.or-sep{display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em;}
.or-sep::before,.or-sep::after{content:''; flex:1; height:1px; background:var(--border);}

/* ---------- Adjuntar archivo por campo ---------- */
.field-label-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.attach-btn{
  background:none; border:none; color:var(--navy-2); font-size:11px; font-weight:600;
  cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:4px;
  font-family:'Inter',sans-serif; white-space:nowrap;
}
.attach-btn:hover{color:var(--gold); text-decoration:underline;}
.attach-hint{margin-top:-2px;}

/* ---------- Checkboxes (Recursos de comunicación) ---------- */
.checkbox-list{display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:#FBFBFC; border:1px solid var(--border); border-radius:7px;}
.checkbox-item{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer;}
.checkbox-item input{width:auto; accent-color:var(--gold); cursor:pointer;}

/* ---------- Citas / sound bites (resultado) ---------- */
.quote-block{
  border-left:3px solid var(--gold); background:#FBFBFC; border-radius:0 8px 8px 0;
  padding:12px 16px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; line-height:1.55;
}
.quote-block .quote-text{font-style:italic; color:var(--text);}
.quote-block .quote-meta{font-size:11.5px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:10px;}
.quote-block .quote-meta span{background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:2px 9px;}

/* ---------- Recursos (resultado) ---------- */
.recurso-list{display:flex; flex-direction:column; gap:10px;}
.recurso-item{
  border:1px solid var(--border); border-radius:8px; padding:12px 14px;
  display:flex; flex-direction:column; gap:6px; background:#FBFBFC;
}
.recurso-texto{font-size:13.5px; line-height:1.5; color:var(--text); font-weight:500;}
.recurso-nota{font-size:11.5px; color:var(--text-muted); font-style:italic;}
.recurso-item .btn-secondary{align-self:flex-start; margin-top:2px;}

/* ---------- Asistente / wizard de preguntas guiadas ---------- */
.asistente-toggle-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.link-btn{
  background:none; border:none; color:var(--navy-2); font-size:12px; font-weight:600;
  cursor:pointer; text-decoration:underline; padding:0; font-family:'Inter',sans-serif;
}
.link-btn:hover{color:var(--gold);}
.wizard-box{
  display:flex; flex-direction:column; gap:12px; padding:16px;
  background:var(--bg); border:1px dashed var(--border); border-radius:8px;
}
.wizard-box .field{gap:4px;}
.wizard-intro{font-size:12px; color:var(--text-muted); margin:-2px 0 2px;}

.btn-primary{
  margin-top:4px;
  background:linear-gradient(135deg,var(--navy-3),var(--navy));
  color:#fff; border:none; border-radius:8px;
  padding:13px 18px; font-size:14px; font-weight:600;
  cursor:pointer; font-family:'Inter',sans-serif;
  transition:opacity .15s ease, transform .1s ease;
}
.btn-primary:hover{opacity:.92;}
.btn-primary:active{transform:scale(.99);}
.btn-primary:disabled{opacity:.55; cursor:default;}

.btn-secondary{
  background:#fff; color:var(--navy); border:1px solid var(--border);
  border-radius:7px; padding:8px 14px; font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:'Inter',sans-serif;
}
.btn-secondary:hover{border-color:var(--gold);}

/* ---------- Progress ---------- */
.progress-wrap{display:flex; flex-direction:column; gap:6px;}
.progress-bar{height:6px; background:var(--border); border-radius:4px; overflow:hidden;}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); width:0%; transition:width .3s ease;}
.progress-bar.indeterminate .progress-fill{width:40%; animation:indet 1.1s ease-in-out infinite;}
@keyframes indet{0%{transform:translateX(-100%);}100%{transform:translateX(250%);}}
.progress-label{font-size:12px; color:var(--text-muted);}

.error-msg{
  background:var(--danger-bg); color:var(--danger); border:1px solid rgba(179,38,30,.25);
  padding:10px 12px; border-radius:7px; font-size:13px;
}

/* ---------- Results ---------- */
.result-card{display:flex; flex-direction:column; gap:20px; grid-column:2; grid-row:1;}
.empty-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--text-muted); text-align:center; min-height:320px;
  border-style:dashed; grid-column:2; grid-row:1;
}
@media (max-width:980px){ .result-card,.empty-card{grid-column:1;} }
.empty-icon{font-size:26px; color:var(--border); background:var(--bg); width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

.result-block{display:flex; flex-direction:column; gap:8px;}
.result-block h3{font-size:15px; color:var(--navy); font-family:'Inter',sans-serif; font-weight:700;}
.score-row{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.score-pill{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px;
  background:var(--navy); color:var(--gold-light); padding:4px 10px; border-radius:20px;
}
.subhead{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:14px 0 4px;}
.result-text{font-size:13.5px; line-height:1.6; color:var(--text); white-space:pre-line;}
.result-list{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; line-height:1.5;}
.result-list.fortalezas li::marker{color:var(--success);}
.result-list.debilidades li::marker{color:var(--danger);}
.result-list.recos li::marker{color:var(--gold);}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:640px){ .two-col{grid-template-columns:1fr;} }

.speech-box{
  background:#FBFBFC; border:1px solid var(--border); border-radius:8px;
  padding:18px 20px; font-size:14px; line-height:1.75; white-space:pre-line;
  max-height:520px; overflow-y:auto;
}
.speech-box .cue{color:var(--gold); font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;}

.result-header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.result-title{font-size:19px; color:var(--navy); font-weight:700;}
.result-meta{font-size:12px; color:var(--text-muted); margin-top:3px;}

.tag-row{display:flex; flex-wrap:wrap; gap:6px;}
.tag{background:var(--bg); border:1px solid var(--border); color:var(--navy-2); font-size:11.5px; padding:3px 9px; border-radius:20px; font-weight:600;}

.divider{height:1px; background:var(--border); margin:2px 0;}

/* ---------- Sub-tabs (Perfiles) ---------- */
.subtabs{display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--border);}
.subtab-btn{
  background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif;
  font-size:13.5px; font-weight:600; color:var(--text-muted);
  padding:10px 4px; margin-right:20px; border-bottom:2px solid transparent;
}
.subtab-btn:hover{color:var(--navy);}
.subtab-btn.active{color:var(--navy); border-bottom-color:var(--gold);}
.subpanel{display:none;}
.subpanel.active{display:block;}
.form-card h3{font-size:14px; color:var(--navy); font-family:'Inter',sans-serif; font-weight:700; margin:0;}

/* ---------- List items (perfiles / historial) ---------- */
.list-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:14px 4px; border-bottom:1px solid var(--border); cursor:pointer;
}
.list-item:last-child{border-bottom:none;}
.list-item:hover{background:var(--bg);}
.list-item.selected{background:#F7E9E7;}
.list-item-title{font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:2px;}
.list-item-meta{font-size:11.5px; color:var(--text-muted);}
.list-item-actions{display:flex; gap:4px; flex-shrink:0;}
.icon-btn{
  background:none; border:1px solid var(--border); border-radius:6px;
  width:28px; height:28px; font-size:14px; cursor:pointer; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.icon-btn:hover{border-color:var(--gold); color:var(--navy);}
.icon-btn.is-fav{color:var(--gold); border-color:var(--gold);}
.list-empty-hint{padding:20px 4px; color:var(--text-muted); font-size:13px;}

/* ---------- Home ---------- */
.home-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
.home-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:8px;
  font-family:'Inter',sans-serif; transition:border-color .15s ease, transform .1s ease;
}
.home-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.home-card-icon{
  font-size:19px; color:var(--gold); width:36px; height:36px; border-radius:8px;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
}
.home-card-title{font-size:15px; font-weight:700; color:var(--navy); font-family:'Inter',sans-serif;}
.home-card-desc{font-size:12.5px; color:var(--text-muted); line-height:1.5;}
.home-note{
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; font-size:13px; color:var(--text-muted); margin-top:22px; line-height:1.6;
}