/* Panel del equipo — layout tipo CRM, sobre la misma base visual del sitio público */

.admin-body{ background: var(--stone-50); overflow-x: hidden; }

/* ---------- Acceso ---------- */
.gate{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(700px 500px at 15% 10%, rgba(193,122,69,0.14), transparent 60%),
    radial-gradient(600px 500px at 90% 90%, rgba(92,107,70,0.12), transparent 60%),
    var(--cream);
}
.gate-card{
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.gate-card h1{ font-size: 1.3rem; }
.gate-card p{ color: var(--ink-soft); font-size: 13.5px; margin-top: 10px; }
#gateForm{ margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
#gateForm input{
  padding: 13px 15px;
  border-radius: 12px;
  border: 1.5px solid rgba(42,33,23,0.15);
  background: var(--stone-50);
  outline: none;
}
#gateForm input:focus{ border-color: var(--copper-500); }
.gate-error{ color: var(--rust-700); font-size: 13px; min-height: 18px; margin-top: 10px; }
.gate-note{ font-size: 11.5px; color: var(--ink-faint); margin-top: 14px; }

/* ---------- Layout ---------- */
.admin-app{
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.admin-side{
  background: var(--charcoal-900);
  color: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.admin-side .brand-name, .admin-side .brand-tag{ color: #fff; }
.admin-side .brand-tag{ color: var(--copper-300); }
.admin-side .logo-mark{ color: #fff; }
.side-nav{ display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; flex: 1; }
.side-link{
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s, color .2s;
}
.side-link svg{ width: 17px; height: 17px; flex: none; }
.side-link:hover{ background: rgba(255,255,255,0.06); color: #fff; }
.side-link.is-active{ background: rgba(193,122,69,0.18); color: #fff; }
.side-foot{ padding: 14px; border-top: 1px solid rgba(255,255,255,0.1); }
.side-foot .btn-ghost{ color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.18); }
.side-foot .btn-ghost:hover{ background: rgba(255,255,255,0.08); }

.admin-main{ padding: 30px clamp(20px, 3vw, 40px) 60px; max-width: 1240px; }

.admin-topbar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.admin-topbar h1{ font-size: 1.5rem; }
.admin-topbar p{ color: var(--ink-soft); font-size: 13.5px; margin-top: 4px; }
.search-box{
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid rgba(42,33,23,0.12);
  border-radius: 12px; padding: 10px 14px;
  min-width: 280px;
}
.search-box svg{ width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.search-box input{ border: none; outline: none; background: transparent; width: 100%; font-size: 14px; }

.kpi-row{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
@media (max-width: 980px){ .kpi-row{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px){ .kpi-row{ grid-template-columns: repeat(2,1fr); } }
.kpi-card{
  background: #fff;
  border: 1.5px solid rgba(42,33,23,0.08);
  border-radius: var(--radius-md);
  padding: 18px 18px;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.kpi-card:hover{ transform: translateY(-2px); }
.kpi-card.is-active{ border-color: var(--copper-500); background: rgba(193,122,69,0.06); }
.kpi-card .num{ font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; font-weight: 700; }
.kpi-card .lbl{ font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

.salary-stats{
  background: #fff;
  border: 1.5px solid rgba(42,33,23,0.08);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 26px;
}
.salary-stats h3{ font-size: 15px; font-weight: 700; }
.salary-stats-sub{ font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; max-width: 62ch; }
.salary-stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.salary-stat-card{
  background: var(--stone-50);
  border-radius: 12px;
  padding: 13px 15px;
}
.salary-stat-card .job{ font-size: 12.5px; font-weight: 600; }
.salary-stat-card .periodo{ font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.salary-stat-card .avg{ font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--copper-600); margin-top: 6px; }
.salary-stat-card .range{ font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

/* ---------- Drawer: redes sociales y CV ---------- */
.d-social-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--stone-50);
  text-decoration: none;
  color: var(--ink);
}
.d-social-card img{ width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.d-social-badge{
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--copper-600); color: #fff; font-weight: 700; font-size: 13px;
}
.d-social-card .txt{ min-width: 0; }
.d-social-card .platform{ font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.d-social-card .title{ font-size: 13.5px; font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-cv-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px; border-radius: 10px; border: 1.5px solid rgba(42,33,23,0.14);
  background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.d-cv-btn:hover{ border-color: var(--copper-500); }

.toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.status-filters{ display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.status-filters button{
  border: 1.5px solid rgba(42,33,23,0.12);
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.status-filters button.is-active{ background: var(--ink); color: #fff; border-color: var(--ink); }
#jobFilter{
  padding: 9px 14px; border-radius: 10px;
  border: 1.5px solid rgba(42,33,23,0.12);
  background: #fff; font-size: 13px;
}

.table-wrap{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(42,33,23,0.08);
  overflow-x: auto;
}
.cand-table{ width: 100%; min-width: 720px; border-collapse: collapse; }
.cand-table th{
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  padding: 14px 18px;
  border-bottom: 1px solid rgba(42,33,23,0.08);
  background: var(--stone-50);
}
.cand-table td{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(42,33,23,0.06);
  font-size: 13.8px;
  vertical-align: middle;
}
.cand-table tr:last-child td{ border-bottom: none; }
.cand-table tr{ transition: background .15s; }
.cand-table tbody tr:hover{ background: var(--stone-50); }
.cand-name{ font-weight: 600; }
.cand-sub{ font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.pill{
  display: inline-flex; align-items:center; gap:6px;
  font-size: 11.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
}
.pill.nuevo{ background: rgba(90,110,170,0.14); color: #45568f; }
.pill.revision{ background: rgba(193,122,69,0.16); color: var(--copper-700); }
.pill.entrevista{ background: rgba(60,110,120,0.14); color: #2c6068; }
.pill.aprobado{ background: rgba(92,107,70,0.16); color: var(--moss-600); }
.pill.rechazado{ background: rgba(138,63,44,0.1); color: var(--rust-700); }
.row-view{
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint);
  padding: 6px; border-radius: 8px;
}
.row-view:hover{ background: var(--stone-100); color: var(--ink); }

.empty-state{ padding: 60px 20px; text-align: center; color: var(--ink-faint); }

/* ---------- Drawer ---------- */
.drawer-overlay{
  position: fixed; inset: 0;
  background: rgba(20,16,12,0.4);
  z-index: 210;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.drawer-overlay.is-open{ opacity: 1; pointer-events: auto; }
.drawer{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--cream);
  padding: 34px 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  box-shadow: -20px 0 50px -20px rgba(20,16,12,0.3);
}
.drawer-overlay.is-open .drawer{ transform: translateX(0); }

.d-folio{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:var(--ink-faint); letter-spacing:.04em; }
.d-name{ font-size: 1.4rem; margin-top: 4px; }
.d-job{ color: var(--copper-600); font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.d-status{ margin-top: 14px; }

.d-section{ margin-top: 26px; }
.d-section h4{ font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 10px; }
.d-info-row{ display: flex; justify-content: space-between; gap: 10px; font-size: 13.8px; padding: 9px 0; border-bottom: 1px dashed rgba(42,33,23,0.1); }
.d-info-row span:first-child{ color: var(--ink-faint); }
.d-message{ font-size: 13.8px; color: var(--ink-soft); background: var(--stone-100); border-radius: 10px; padding: 12px 14px; }

.d-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.d-actions .btn{ width: 100%; }

.d-track-link{
  margin-top: 10px;
  font-size: 12.5px;
  word-break: break-all;
  background: var(--stone-100);
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.d-track-link button{ border:none; background:transparent; cursor:pointer; color: var(--copper-600); font-weight:600; font-size:12px; flex: none; }

.admin-form{ display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.admin-form .field label{ font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display:block; margin-bottom: 6px; }
.admin-form input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(42,33,23,0.15);
  background: var(--stone-50);
  outline: none;
}
.admin-form input:focus{ border-color: var(--copper-500); }

.share-text{
  margin-top: 14px;
  width: 100%;
  border-radius: 10px;
  border: 1.5px solid rgba(42,33,23,0.15);
  background: var(--stone-50);
  padding: 12px 14px;
  font-size: 13.5px;
  resize: vertical;
}

@media (max-width: 860px){
  .admin-app{ grid-template-columns: 1fr; }
  .admin-side{ position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 4px 10px; flex-wrap: wrap; row-gap: 6px; }
  .admin-side .brand{ padding: 10px !important; }
  .side-nav{ flex-direction: row; flex: none; }
  .side-foot{ display: flex; gap: 8px; border-top: none; padding: 8px 10px; }
  .cand-table{ font-size: 12.5px; }
}
@media (max-width: 700px){
  .admin-topbar{ flex-direction: column; align-items: stretch; }
  .search-box{ min-width: 0; width: 100%; }
  .side-link span, .side-link{ white-space: nowrap; }
}