/* NEXXO · Premium UX · UX-04 · Carteira.
   Só apresentação da Carteira (.px). A lista, a busca e a ordenação vêm de listProjects() em app.js. */

.px{display:grid;gap:14px;min-width:0}
.px>*,.px-list{min-width:0}
.px-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.px-head h1{margin:0;min-width:0}
.px-head .actions{display:flex;align-items:stretch;gap:8px;flex:none}
.px-head .btn{min-height:44px;margin-top:0}
/* "+ Projeto": identificável, porém indisponível */
.px-soon{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.2;color:var(--sub);background:transparent;border-style:dashed;cursor:not-allowed}
.px-soon small{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--sub)}

/* Busca */
.px-tools{display:flex;align-items:center;gap:10px;min-width:0}
.px-search{position:relative;flex:1 1 auto;min-width:0}
.px-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.px-search>.ui-icon{position:absolute;left:14px;top:50%;width:17px;height:17px;margin-top:-8.5px;color:var(--sub);pointer-events:none}
.px-search input{
  width:100%;min-height:46px;padding:0 46px 0 42px;
  font:inherit;font-size:14.5px;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
}
.px-search input::placeholder{color:var(--sub)}
.px-search input:focus{border-color:var(--mint);outline:0}
.px-clear{
  position:absolute;right:1px;top:1px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  font:inherit;font-size:22px;line-height:1;color:var(--sub);background:transparent;border:0;border-radius:var(--r-sm);cursor:pointer;
}
.px-clear[hidden]{display:none}
.px-clear:hover{color:var(--text)}

/* Filtro por designação */
.px-chips{display:flex;flex-wrap:wrap;gap:8px}
.px-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--sub);
  background:var(--card);border:1px solid var(--line);border-radius:999px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.px-chip b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.px-chip:hover{border-color:var(--line2);color:var(--text)}
.px-chip.selected{background:var(--green-soft);border-color:var(--action);color:var(--text)}

/* Resultados */
.px-summary{margin:2px 0 10px;font-size:13px;color:var(--sub);overflow-wrap:anywhere}
.px-list .table-scroll{margin:0}
.px-list .pagination{margin-top:14px}
.px-none{padding:28px 18px;border:1px dashed var(--line2);border-radius:var(--r);color:var(--sub);font-size:13.5px;line-height:1.5;text-align:center}
.px-none strong{display:block;margin-bottom:3px;color:var(--text);font-size:15.5px;font-weight:650}
.px-none-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.px-none .btn{min-height:44px;margin-top:0}

/* Cartão de projeto (lista do celular) */
.px .portfolio-mobile{gap:8px}
.px .px-card{
  display:flex;align-items:center;gap:13px;width:100%;min-width:0;min-height:76px;padding:12px 12px 12px 14px;
  font:inherit;text-align:left;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
}
.px .px-card:hover{border-color:var(--line2);background:var(--raised)}
.px-thumb{display:inline-grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--green-soft);color:var(--action)}
.px-thumb .ui-icon{width:20px;height:20px}
.px-body{display:block;min-width:0;flex:1}
.px-body strong{display:block;font-size:14.5px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.px-body small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--sub);overflow-wrap:anywhere}
.px-late{color:var(--red-fg);font-weight:650}
.px-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.px-go{display:inline-flex;flex:none;color:var(--sub2)}
.px-go .ui-icon{width:16px;height:16px}

.px-chip:focus-visible,.px-card:focus-visible,.px-clear:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

@media(max-width:820px){
  /* No celular os cartões ficam soltos, sem a moldura da tabela. */
  .px .px-list{padding:0;background:transparent;border:0;box-shadow:none}
}
@media(max-width:620px){
  .px{gap:12px}
  .px-head h1{font-size:22px}
  .px-head{flex-wrap:wrap}
  .px-head .actions{width:100%}
  .px-head .actions .btn{flex:1 1 0;min-width:0;padding-inline:6px}
  .px-chips{flex-wrap:nowrap;gap:6px}
  .px-chip{flex:1 1 0;justify-content:center;min-width:0;padding:0 6px;gap:6px}
}
@media(max-width:400px){
  .px-chip{font-size:13px;gap:5px;padding:0 4px}
  .px .px-card{gap:10px;padding-inline:11px 8px}
}
@media(prefers-reduced-motion:reduce){.px-chip{transition:none}}
@media print{.px-tools,.px-chips,.px-go,.px-head .actions{display:none}}