/* =========================================================================
   FLEXWORK LATAM · Panel de la plataforma (app.html)
   Se apoya en css/styles.css (colores, botones, formularios, diálogos).
   Layout: barra lateral oscura de marca + área de trabajo en tinte claro.
   ========================================================================= */

.panel { background: var(--bg-tint); }
.shell { background: linear-gradient(90deg, var(--hero-bg) 248px, transparent 248px); display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

/* ---------- Barra lateral ---------- */
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--hero-bg); color: var(--hero-muted);
  display: flex; flex-direction: column; gap: 6px; padding: 20px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background-image: radial-gradient(circle at 120% 104%, rgba(214,36,159,.22) 0 30%, transparent 30.2%), radial-gradient(circle at -30% -10%, rgba(124,58,237,.3) 0 30%, transparent 30.2%);
}
.side-top { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 8px; }
.side .logo { text-decoration: none; }
.side .logo-word { color: #fff; font-size: 1.5rem; }
.side .logo-word b { color: #F06FCB; }
.side .logo-latam { color: var(--hero-muted); }
.side-close { display: none; background: transparent; color: #fff; border-color: rgba(255,255,255,.2); }
.side-role { font: 500 .68rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #F06FCB; padding: 10px 10px 6px; }
.side-nav { display: grid; gap: 2px; }
.side-nav a, .side-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: var(--hero-muted); text-decoration: none; font: 500 .9rem/1.2 var(--font-body);
  border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%;
}
.side-nav a:hover, .side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-nav a[aria-current="page"] { background: rgba(124,58,237,.35); color: #fff; box-shadow: inset 3px 0 0 #F06FCB; }
.side-nav .count { margin-left: auto; font: 500 .7rem/1 var(--font-mono); background: rgba(255,255,255,.1); color: #fff; padding: .3em .55em; border-radius: 999px; }
.side-nav .sep { font: 500 .64rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(186,179,205,.6); padding: 14px 12px 4px; }
.side-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.side-scrim { display: none; }

/* ---------- Barra superior ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(16px, 3vw, 32px); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); opacity: .8; }
.menu-btn { display: none; }
.topbar-title { min-width: 0; margin-right: auto; }
.topbar-title h1 { font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb { font: 500 .68rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.role-switch { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--bg-tint); border: 1px solid var(--line); }
.role-switch button { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem/1 var(--font-body); padding: .62em .85em; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.role-switch button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.bell { position: relative; }
.bell .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #E64998; box-shadow: 0 0 0 2px var(--surface); }
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--font-body); color: #fff; background: var(--grad); flex: none; }
.user-txt { display: grid; line-height: 1.25; min-width: 0; }
.user-txt b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.user-txt small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

.demo-strip { display: flex; gap: 10px; align-items: flex-start; margin: 16px clamp(16px, 3vw, 32px) 0; padding: 10px 14px; border-radius: 10px; font-size: .82rem; color: var(--pending); background: var(--pending-soft); border: 1px dashed var(--pending-line); }
.demo-strip .i { margin-top: .15em; }

/* ---------- Vista ---------- */
.view { padding: 20px clamp(16px, 3vw, 32px) 48px; display: grid; gap: 20px; align-content: start; outline: none; }
.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.view-head > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.view-head > .view-actions { flex: 0 1 auto; justify-content: flex-end; }
.view-head p { color: var(--muted); max-width: 70ch; }
.view-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 2.2vw, 22px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.panel-card > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-card h2 { font-size: 1.08rem; letter-spacing: -.01em; }
.panel-card .sub { font-size: .82rem; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-2-eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.stack { display: grid; gap: 20px; align-content: start; min-width: 0; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 10px; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.kpi-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.kpi-val { font: 700 2rem/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-val small { font-size: .9rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.kpi-lbl { font-size: .84rem; color: var(--muted); }
.kpi-hero { background: var(--hero-bg); color: var(--hero-fg); border-color: transparent; background-image: radial-gradient(circle at 115% -20%, rgba(124,58,237,.55) 0 45%, transparent 45.2%); }
.kpi-hero .kpi-icon { background: rgba(255,255,255,.1); color: #F06FCB; }
.kpi-hero .kpi-lbl { color: var(--hero-muted); }
.kpi-hero::before { display: none; }

/* Lista de análisis IA */
.ai-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ai-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.ai-list li:first-child { border-top: 0; }
.ai-list b { font-size: .9rem; display: block; }
.ai-list span.role { font-size: .76rem; color: var(--muted); }
.ai-list .link-btn { font-size: .8rem; }

/* Embudo */
.funnel { display: grid; gap: 8px; }
.funnel-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: .82rem; }
.funnel-bar { height: 26px; border-radius: 7px; background: var(--bg-tint); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; border-radius: 7px; min-width: 4px; transition: width .5s ease; }
.funnel-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* Últimos postulantes */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.people li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.people .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--font-body); color: #fff; }
.people b { font-size: .86rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people small { font-size: .74rem; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people time { font-size: .72rem; color: var(--muted); text-align: right; white-space: nowrap; }

/* Tablas */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 720px; }
.tbl thead { background: var(--grad); }
.tbl thead th { text-align: left; font: 600 .7rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: transparent; padding: 13px 16px; white-space: nowrap; }
.tbl td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: var(--bg-tint); }
.tbl .t-title { font-weight: 600; display: block; }
.tbl .t-sub { font-size: .76rem; color: var(--muted); display: block; }
.tbl .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.tbl .dates { font-size: .74rem; color: var(--muted); line-height: 1.5; white-space: nowrap; }
.tbl .dates b { color: var(--fg); font-weight: 600; }
.tbl-empty { text-align: center; color: var(--muted); padding: 28px !important; }
.row-link { background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.row-link:hover .t-title { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.status { display: inline-flex; align-items: center; gap: .4em; font: 700 .68rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: .5em .8em; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-publicada, .st-finalizada { background: var(--ok-soft); color: var(--ok); }
.st-borrador, .st-pendiente { background: var(--mid-soft); color: var(--mid); }
.st-cerrada { background: var(--bg-tint); color: var(--muted); }
.st-simulada { background: var(--pending-soft); color: var(--pending); border: 1px dashed var(--pending-line); }

.tests-cell { display: grid; gap: 2px; font-size: .78rem; }
.tests-cell b { color: var(--accent-ink); }
.link-cell { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 4px 4px 10px; max-width: 220px; }
.link-cell code { font: 400 .72rem/1 var(--font-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.toolbar .field { width: min(100%, 220px); }
.toolbar .field-search { width: min(100%, 320px); }
.toolbar .spacer { margin-left: auto; }

/* Tablero en el panel */
.panel .board { grid-template-columns: repeat(5, minmax(240px, 1fr)); }
.panel .board-scroll { margin-inline: 0; padding-inline: 0; }
.col[data-stage="descartados"] { --col-c: var(--low); }

/* Análisis IA */
.ia-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.ia-progress { height: 8px; border-radius: 999px; background: var(--bg-tint); overflow: hidden; }
.ia-progress i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 999px; transition: width 1.4s ease; }
.ia-empty { display: grid; justify-items: center; text-align: center; gap: 10px; color: var(--muted); padding: 36px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); }
.ia-empty .i { width: 30px; height: 30px; color: var(--ai); }
.drop-zone { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); font-size: .84rem; }
.drop-zone .i { width: 26px; height: 26px; color: var(--accent-ink); }

/* Pruebas */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.test-pick { position: relative; }
.test-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.test-pick span { display: inline-grid; gap: 2px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--bg); font-size: .82rem; }
.test-pick span small { color: var(--muted); font-size: .72rem; }
.test-pick input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.test-pick input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.catalog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.catalog li { padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 2px; }
.catalog b { font-family: var(--font-mono); font-size: .86rem; color: var(--accent-ink); }
.catalog small { color: var(--muted); font-size: .76rem; }

/* Profesional */
.welcome { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px); background: var(--hero-bg); color: var(--hero-fg); display: grid; gap: 14px; background-image: radial-gradient(circle at 104% -10%, rgba(124,58,237,.5) 0 36%, transparent 36.2%), radial-gradient(circle at 96% 130%, rgba(214,36,159,.35) 0 26%, transparent 26.2%); }
.welcome h2 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.welcome p { color: var(--hero-muted); max-width: 56ch; }
.progress { height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; max-width: 420px; }
.progress i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.progress-lbl { font-size: .82rem; color: var(--hero-muted); }
.progress-lbl b { color: #fff; }

.apps { display: grid; gap: 12px; }
.app-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 14px; }
.app-item header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.app-item h3 { font-size: 1.02rem; }
.app-item header p { font-size: .8rem; color: var(--muted); }
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: t; }
.track li { display: grid; gap: 6px; font-size: .74rem; color: var(--muted); }
.track li::before { content: ""; height: 6px; border-radius: 999px; background: var(--line); }
.track li.done::before { background: var(--accent); }
.track li.now { color: var(--fg); font-weight: 700; }
.track li.now::before { background: var(--grad); }

.exp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; }
.exp-list b { font-size: .88rem; display: block; }
.exp-list small { font-size: .76rem; color: var(--muted); }

.notif { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notif li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 11px; border-radius: 10px; background: var(--bg-tint); font-size: .86rem; }
.notif .i { color: var(--accent-ink); margin-top: .2em; }
.notif small { color: var(--muted); display: block; }

/* ---------- Adaptación ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .ia-grid { grid-template-columns: minmax(0, 1fr); }
  .user-txt { display: none; }
}
@media (max-width: 980px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(290px, 86vw); z-index: 60; transform: translateX(-105%); transition: transform .25s ease; height: 100dvh; }
  .side.open { transform: none; box-shadow: var(--shadow-lg); }
  .side-close, .menu-btn { display: grid; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10,8,20,.5); }
  .grid-2-eq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .role-switch span { display: none; }
  .role-switch button { padding: .62em .7em; }
  .kpi-val { font-size: 1.6rem; }
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funnel-row { grid-template-columns: 92px minmax(0, 1fr) 28px; }
  .ai-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ai-list li .match { display: none; }
}
@media (max-width: 420px) {
  .kpi { padding: 14px; }
  .kpi-val { font-size: 1.4rem; }
  .bell { display: none; }
}