/* ════════════════════════════════════════════════════════════
   QUIMII — Design system compartido
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  --bg:           #0f172a;
  --bg-elevado:   #131c31;
  --card:         #1e293b;
  --card-hover:   #25334a;
  --borde:        rgba(148,163,184,.14);
  --primario:     #3b82f6;
  --primario-dim: rgba(59,130,246,.16);
  --secundario:   #60a5fa;
  --texto:        #ffffff;
  --texto-sec:    #94a3b8;
  --texto-ter:    #64748a;

  --estado-idea:       #fbbf24;
  --estado-mvp:        #a78bfa;
  --estado-desarrollo: #38bdf8;
  --estado-lanzado:    #34d399;
  --estrella-color:    #fbbf24;

  --f-display: "Space Grotesk", sans-serif;
  --f-body:    "Inter", sans-serif;
  --f-mono:    "JetBrains Mono", monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --sombra: 0 8px 24px rgba(0,0,0,.35);
  --trans:  180ms ease;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.qx{ margin:0; background:var(--bg); color:var(--texto); font-family:var(--f-body); -webkit-font-smoothing:antialiased; }
.qx a{ color:inherit; text-decoration:none; }
.qx img{ max-width:100%; display:block; }
.hidden{ display:none !important; }
.qx .c{ max-width:1180px; margin:0 auto; padding:0 var(--s5); }
.qx :focus-visible{ outline:2px solid var(--secundario); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){ .qx *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ── BOTONES ─────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--f-body); font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:var(--r-md); border:none;
  cursor:pointer; transition:transform var(--trans),background var(--trans),box-shadow var(--trans);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primario{ background:var(--primario); color:#fff; }
.btn-primario:hover{ background:#2f6fe0; box-shadow:0 0 0 4px var(--primario-dim); }
.btn-secundario{ background:transparent; color:var(--texto); border:1px solid var(--borde); }
.btn-secundario:hover{ background:rgba(255,255,255,.05); border-color:var(--secundario); }
.btn-peligro{ background:transparent; color:#f87171; border:1px solid #f87171; }
.btn-peligro:hover{ background:rgba(248,113,113,.1); }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn-bloque{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ── NAVBAR ──────────────────────────────────────── */
.qx-navbar{
  position:sticky; top:0; z-index:100;
  background:rgba(15,23,42,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background var(--trans),border-color var(--trans);
}
.qx-navbar.con-scroll{ background:rgba(15,23,42,.92); border-color:var(--borde); }
.qx-navbar .fila{
  max-width:1180px; margin:0 auto; padding:0 var(--s5);
  height:64px; display:flex; align-items:center; gap:var(--s6);
}
.qx-logo{ display:flex; align-items:center; gap:var(--s2); font-family:var(--f-display); font-weight:700; font-size:19px; flex-shrink:0; }
.qx-logo .marca{ width:30px; height:30px; border-radius:var(--r-sm); background:linear-gradient(135deg,var(--primario),var(--secundario)); display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; }
.qx-nav-links{ display:flex; align-items:center; gap:var(--s5); flex:1; }
.qx-nav-links a{ font-size:14px; color:var(--texto-sec); font-weight:500; padding:6px 2px; border-bottom:2px solid transparent; transition:color var(--trans),border-color var(--trans); }
.qx-nav-links a:hover,.qx-nav-links a.activo{ color:var(--texto); border-color:var(--secundario); }
.qx-nav-derecha{ display:flex; align-items:center; gap:var(--s3); margin-left:auto; }
.qx-avatar-btn{ position:relative; background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; gap:var(--s2); }
.qx-avatar,.qx-avatar-ini{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--borde); }
.qx-avatar-ini{ display:flex; align-items:center; justify-content:center; background:var(--primario-dim); color:var(--secundario); font-family:var(--f-mono); font-size:12px; font-weight:700; }
.qx-nombre-navbar{ font-size:14px; font-weight:600; display:none; }
@media(min-width:860px){ .qx-nombre-navbar{ display:inline; } }
.qx-dropdown{ position:absolute; top:calc(100% + 10px); right:0; min-width:190px; background:var(--card); border:1px solid var(--borde); border-radius:var(--r-md); box-shadow:var(--sombra); padding:var(--s2); display:none; flex-direction:column; gap:2px; }
.qx-dropdown.abierto{ display:flex; }
.qx-dropdown a,.qx-dropdown button{ display:flex; align-items:center; gap:var(--s2); width:100%; text-align:left; background:none; border:none; color:var(--texto); font-family:var(--f-body); font-size:14px; padding:9px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background var(--trans); }
.qx-dropdown a:hover,.qx-dropdown button:hover{ background:rgba(255,255,255,.06); }
.qx-dropdown hr{ border:none; border-top:1px solid var(--borde); margin:4px 0; }
.qx-toggle-mobil{ display:none; background:none; border:none; color:var(--texto); font-size:20px; cursor:pointer; }
.qx-menu-mobil{ display:none; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s5); background:var(--bg-elevado); border-bottom:1px solid var(--borde); }
.qx-menu-mobil.abierto{ display:flex; }
.qx-menu-mobil a{ color:var(--texto-sec); font-size:15px; padding:6px 0; }
@media(max-width:859px){ .qx-nav-links{ display:none; } .qx-toggle-mobil{ display:block; } .hidden-mob{ display:none; } }

/* ── CARDS ───────────────────────────────────────── */
.qx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:var(--s5); }
.qx-card{ background:var(--card); border:1px solid var(--borde); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform var(--trans),border-color var(--trans),background var(--trans); }
.qx-card:hover{ transform:translateY(-3px); border-color:var(--secundario); background:var(--card-hover); }
.qx-card-banner{ height:92px; position:relative; }
.qx-card-cuerpo{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.qx-card-cuerpo h3{ font-family:var(--f-display); font-size:16px; margin:0; }
.qx-card-cuerpo .tagline{ font-size:13px; color:var(--texto-sec); margin:0; line-height:1.4; flex:1; }
.qx-card-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:var(--s2); border-top:1px solid var(--borde); margin-top:4px; gap:var(--s2); }

/* ── PILLS / BADGES ──────────────────────────────── */
.qx-pill{ font-family:var(--f-mono); font-size:11px; font-weight:700; padding:5px 10px; border-radius:var(--r-full); display:inline-flex; align-items:center; gap:5px; }
.qx-pill-estado{ position:absolute; top:10px; left:10px; background:rgba(15,23,42,.55); color:#fff; backdrop-filter:blur(4px); }
.qx-pill.match{ background:rgba(59,130,246,.2); color:var(--secundario); border:1px solid rgba(59,130,246,.3); }
.qx-pill.inversion{ background:rgba(251,191,36,.15); color:#fbbf24; border:1px solid rgba(251,191,36,.3); }

/* ── TAGS TECNOLOGÍAS ────────────────────────────── */
.qx-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.qx-tag{ font-family:var(--f-mono); font-size:11px; color:var(--secundario); background:var(--primario-dim); padding:3px 8px; border-radius:var(--r-sm); }

/* ── CHIPS DE FILTRO ─────────────────────────────── */
.qx-chips{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.qx-chip{ font-size:13px; font-weight:600; color:var(--texto-sec); background:var(--card); border:1px solid var(--borde); border-radius:var(--r-full); padding:8px 14px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all var(--trans); }
.qx-chip:hover{ border-color:var(--secundario); color:var(--texto); }
.qx-chip.activo{ background:var(--primario); border-color:var(--primario); color:#fff; }

/* ── ESTRELLAS ───────────────────────────────────── */
.estrella{ color:rgba(251,191,36,.25); font-size:16px; transition:color var(--trans); }
.estrella.llena{ color:var(--estrella-color); }
.estrellas-interactivas .estrella{ cursor:pointer; font-size:20px; }
.estrellas-interactivas .estrella:hover,.estrellas-interactivas .estrella.hover{ color:var(--estrella-color); }

/* ── REPUTACIÓN ──────────────────────────────────── */
.rep-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; font-family:var(--f-mono); padding:5px 12px; border-radius:var(--r-full); }
.rep-nuevo    { background:rgba(148,163,184,.15); color:var(--texto-sec); }
.rep-regular  { background:rgba(96,165,250,.15);  color:var(--secundario); }
.rep-confiable{ background:rgba(52,211,153,.15);  color:#34d399; }
.rep-experto  { background:rgba(251,191,36,.15);  color:#fbbf24; }

/* ── AVATAR STACK ────────────────────────────────── */
.qx-avatar-ini-sm{ display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg-elevado); color:var(--texto-sec); font-family:var(--f-mono); font-size:9px; flex-shrink:0; }
.qx-avatares-stack{ display:flex; }
.qx-avatares-stack img,.qx-avatares-stack .qx-avatar-ini-sm{ width:24px; height:24px; border-radius:50%; border:2px solid var(--card); margin-left:-8px; object-fit:cover; }
.qx-avatares-stack > :first-child{ margin-left:0; }

/* ── KANBAN ──────────────────────────────────────── */
.qx-kanban{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media(max-width:700px){ .qx-kanban{ grid-template-columns:1fr; } }
.qx-kanban-col{ background:var(--bg-elevado); border:1px solid var(--borde); border-radius:var(--r-lg); padding:var(--s4); min-height:200px; display:flex; flex-direction:column; gap:var(--s3); }
.qx-kanban-col h4{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-sec); margin:0 0 var(--s2); display:flex; align-items:center; gap:var(--s2); }
.qx-kanban-col h4 .dot{ width:8px; height:8px; border-radius:50%; }
.col-todo    .dot{ background:var(--texto-ter); }
.col-doing   .dot{ background:var(--estado-desarrollo); }
.col-done    .dot{ background:var(--estado-lanzado); }
.qx-kanban-col.drag-over{ border-color:var(--primario); background:var(--primario-dim); }
.qx-tarea{ background:var(--card); border:1px solid var(--borde); border-radius:var(--r-md); padding:var(--s3) var(--s4); font-size:13px; cursor:grab; user-select:none; transition:box-shadow var(--trans); }
.qx-tarea:active{ cursor:grabbing; box-shadow:var(--sombra); }
.qx-tarea.dragging{ opacity:.4; }
.qx-add-tarea{ display:flex; gap:var(--s2); margin-top:auto; }
.qx-add-tarea input{ flex:1; background:transparent; border:1px dashed var(--borde); border-radius:var(--r-sm); color:var(--texto); font-size:12px; padding:6px 10px; }
.qx-add-tarea input:focus{ outline:none; border-color:var(--secundario); }
.qx-add-tarea button{ background:none; border:none; color:var(--secundario); cursor:pointer; font-size:18px; padding:0 4px; }

/* ── MODAL ───────────────────────────────────────── */
.qx-modal{ position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--s5); }
.qx-modal.hidden{ display:none; }
.qx-modal-contenido{ background:var(--card); border:1px solid var(--borde); border-radius:var(--r-lg); padding:var(--s6); max-width:540px; width:100%; box-shadow:var(--sombra); }
.qx-modal-contenido h3{ font-family:var(--f-display); font-size:20px; margin:0 0 var(--s4); }
.qx-modal-acciones{ display:flex; gap:var(--s3); margin-top:var(--s5); }

/* ── FORMULARIOS ─────────────────────────────────── */
.qx-campo{ margin-bottom:var(--s5); }
.qx-campo label{ display:block; font-size:13px; font-weight:600; color:var(--texto-sec); margin-bottom:var(--s2); }
.qx-campo .ayuda{ font-size:12px; color:var(--texto-ter); margin-top:4px; }
.qx-input,.qx-textarea,.qx-select{ width:100%; background:var(--card); border:1px solid var(--borde); border-radius:var(--r-md); color:var(--texto); font-family:var(--f-body); font-size:14px; padding:11px 14px; transition:border-color var(--trans); }
.qx-input:focus,.qx-textarea:focus,.qx-select:focus{ outline:none; border-color:var(--secundario); }
.qx-textarea{ resize:vertical; min-height:110px; }
.qx-tag-input{ display:flex; flex-wrap:wrap; gap:6px; background:var(--card); border:1px solid var(--borde); border-radius:var(--r-md); padding:8px 10px; }
.qx-tag-input:focus-within{ border-color:var(--secundario); }
.qx-tag-input input{ flex:1; min-width:120px; background:none; border:none; color:var(--texto); font-size:13px; padding:4px; }
.qx-tag-input input:focus{ outline:none; }
.qx-tag-chip{ display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11px; color:var(--secundario); background:var(--primario-dim); padding:4px 6px 4px 9px; border-radius:var(--r-sm); }
.qx-tag-chip button{ background:none; border:none; color:var(--secundario); cursor:pointer; font-size:12px; padding:0 2px; }
.qx-estado-opciones{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.qx-estado-opciones label{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--texto-sec); background:var(--card); border:1px solid var(--borde); border-radius:var(--r-full); padding:8px 14px; cursor:pointer; }
.qx-estado-opciones label:has(input:checked){ border-color:var(--secundario); color:var(--texto); }
.qx-estado-opciones input{ accent-color:var(--primario); }
.qx-form-acciones{ display:flex; gap:var(--s3); margin-top:var(--s6); flex-wrap:wrap; }
.qx-subinputs{ display:flex; flex-direction:column; gap:10px; }

/* ── PANEL / VACIO ───────────────────────────────── */
.qx-panel{ background:var(--card); border:1px solid var(--borde); border-radius:var(--r-lg); padding:var(--s5); }
.qx-panel + .qx-panel{ margin-top:var(--s4); }
.qx-panel h3{ font-family:var(--f-display); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-sec); margin:0 0 var(--s3); }
.qx-vacio{ text-align:center; padding:var(--s7) var(--s4); color:var(--texto-sec); border:1px dashed var(--borde); border-radius:var(--r-lg); }
.qx-vacio i{ font-size:26px; color:var(--texto-ter); margin-bottom:var(--s3); display:block; }

/* ── ROL BUSCA ───────────────────────────────────── */
.qx-rol{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); background:var(--bg-elevado); border:1px solid var(--borde); border-radius:var(--r-md); padding:var(--s3) var(--s4); }
.qx-rol .nombre-rol{ font-size:14px; font-weight:600; }
.qx-rol .nombre-rol small{ display:block; font-size:12px; font-weight:400; color:var(--texto-sec); }

/* ── INTEGRANTE FILA ─────────────────────────────── */
.qx-integrante{ display:flex; align-items:center; gap:var(--s3); padding:var(--s2) 0; }
.qx-integrante .info{ flex:1; }
.qx-integrante .info strong{ font-size:13px; display:block; }
.qx-integrante .info small{ font-size:11px; color:var(--texto-ter); font-family:var(--f-mono); }

/* ── POSTULACIÓN FILA ────────────────────────────── */
.qx-postulacion{ background:var(--bg-elevado); border:1px solid var(--borde); border-radius:var(--r-md); padding:var(--s4); margin-bottom:var(--s3); }
.qx-postulacion .cabeza{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); }
.qx-postulacion .info{ flex:1; }
.qx-postulacion .info strong{ font-size:14px; }
.qx-postulacion .info small{ font-size:12px; color:var(--texto-sec); }
.qx-postulacion .msg{ font-size:13px; color:var(--texto-sec); line-height:1.5; margin-bottom:var(--s3); }
.qx-postulacion .acciones{ display:flex; gap:var(--s2); }

/* ── PERFIL ──────────────────────────────────────── */
.qx-perfil-banner{ height:160px; border-radius:var(--r-lg); margin-top:var(--s6); background:linear-gradient(135deg,var(--primario),#1d4ed8); }
.qx-perfil-header{ display:flex; align-items:flex-end; gap:var(--s4); margin-top:-46px; padding:0 var(--s5); flex-wrap:wrap; }
.qx-perfil-av,.qx-perfil-av-ini{ width:96px; height:96px; border-radius:50%; border:4px solid var(--bg); object-fit:cover; }
.qx-perfil-av-ini{ display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:28px; color:var(--secundario); background:var(--primario-dim); }
.qx-perfil-id{ flex:1; padding-bottom:6px; min-width:200px; }
.qx-perfil-id h1{ font-family:var(--f-display); font-size:24px; margin:0 0 2px; }
.qx-perfil-id .handle{ font-family:var(--f-mono); font-size:13px; color:var(--texto-sec); }
.qx-perfil-id .headline{ font-size:14px; color:var(--secundario); margin-top:4px; }
.qx-perfil-acciones{ display:flex; gap:var(--s2); padding-bottom:8px; flex-wrap:wrap; }
.qx-stats-fila{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.qx-stat .num{ font-family:var(--f-mono); font-size:22px; font-weight:700; }
.qx-stat .lbl{ font-size:12px; color:var(--texto-sec); }
.qx-enlace-fila{ display:flex; align-items:center; gap:var(--s2); font-size:13px; color:var(--texto-sec); padding:4px 0; }
.qx-enlace-fila:hover{ color:var(--secundario); }

/* ── FOOTER ──────────────────────────────────────── */
.qx-footer{ border-top:1px solid var(--borde); margin-top:var(--s8); padding:var(--s7) 0 var(--s6); }
.qx-footer-fila{ display:flex; gap:var(--s8); flex-wrap:wrap; justify-content:space-between; }
.qx-footer-col h4{ font-size:13px; color:var(--texto); margin:0 0 var(--s3); }
.qx-footer-col a{ display:block; font-size:13px; color:var(--texto-sec); margin-bottom:var(--s2); }
.qx-footer-col a:hover{ color:var(--secundario); }
.qx-footer-base{ text-align:center; font-size:12px; color:var(--texto-ter); margin-top:var(--s7); }

/* ── TOAST ───────────────────────────────────────── */
.qx-toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--card); border:1px solid var(--borde); color:var(--texto); padding:12px 20px; border-radius:var(--r-md); font-size:14px; box-shadow:var(--sombra); opacity:0; pointer-events:none; transition:opacity var(--trans),transform var(--trans); z-index:999; white-space:nowrap; }
.qx-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:600px){
  .qx-perfil-acciones{ width:100%; }
  .qx-form-acciones{ flex-direction:column; }
}