/* Portal 0.7 — Tela 11, Arquivos (vehicle-files.js). Carregado depois de portal-ux.css. Prefixo .arq-.
   Só as variáveis de portal-ux.css; as cores dos ícones por tipo (ZIP âmbar, pacote azul claro, outros cinza)
   reaproveitam os tokens que já existem. */
:root{
 --arq-amber:var(--ux-amber);--arq-amber-bg:var(--ux-amber-deep);
 --arq-sky:var(--ux-sky);--arq-sky-bg:var(--ux-sky-deep);
 --arq-blue:var(--ux-blue-soft);--arq-blue-bg:var(--ux-blue-deep);
 --arq-gray:var(--ux-label);--arq-gray-bg:var(--ux-control);
 --arq-selected:var(--ux-blue-deep);
 --arq-row:64px;
}
.arq>.ux-band{margin:0 0 var(--space-16)}
.arq-boot{margin:0;color:var(--ux-muted);font-size:14px}

/* ---- ícone por tipo (quadrado de 40 px) ---- */
.arq-tone{position:relative;flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-10);background:var(--arq-gray-bg);color:var(--arq-gray)}
.arq-tone.is-amber{background:var(--arq-amber-bg);color:var(--arq-amber)}
.arq-tone.is-sky{background:var(--arq-sky-bg);color:var(--arq-sky)}
.arq-tone.is-blue{background:var(--arq-blue-bg);color:var(--arq-blue)}
.arq-tone.is-big{flex-basis:56px;width:56px;height:56px;border-radius:var(--radius-14)}
.arq-tone.is-big svg{width:28px;height:28px}
.arq-lock{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--ux-card);border:1px solid var(--ux-card-line);color:var(--ux-amber)}

/* ---- topo da raiz de um local: Recentes e atalho para Gravações ---- */
.arq-top{margin:0 0 var(--space-24)}
.arq-top>.ux-section{margin:0 0 var(--space-16)}
.arq-seg-name{display:block}
.arq-seg-sub{display:block;font-size:11px;line-height:14px;color:var(--ux-muted);font-weight:400}
.arq-space{margin:var(--space-12) 0 0}
.arq-space[hidden]{display:none}
.arq-space-bar{height:6px;border-radius:3px;background:var(--ux-track);overflow:hidden}
.arq-space-bar>i{display:block;height:100%;border-radius:3px;background:var(--ux-blue)}
.arq-space-text{margin:var(--space-8) 0 0;font-size:13px;line-height:20px;color:var(--ux-muted)}
.arq-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin:0 0 var(--space-24)}
.arq-btns .ux-primary,.arq-btns .ux-outline{min-width:0;padding:0 var(--space-12)}
.arq-recent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
.arq-recent-card{min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:var(--space-12);border:1px solid var(--ux-card-line);border-radius:var(--radius-12);background:var(--ux-card);color:var(--ux-text);text-align:left;font:inherit;cursor:pointer;-webkit-touch-callout:none}
.arq-recent-name{display:block;width:100%;margin-top:var(--space-12);font-size:15px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arq-recent-meta{display:block;width:100%;margin-top:var(--space-4);font-size:13px;line-height:20px;color:var(--ux-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arq-shortcut{width:100%;min-height:var(--arq-row);margin:0;padding:var(--space-12) var(--space-16);display:flex;align-items:center;gap:var(--space-12);border:1px dashed var(--ux-field-line);border-radius:var(--radius-12);background:transparent;color:var(--ux-text);text-align:left;font:inherit;cursor:pointer}
.arq-shortcut .ux-row-name{flex:1 1 auto;min-width:0;padding:0}
.arq-shortcut .ux-row-name>span:first-child{display:block;font-size:15px;line-height:22px}
.arq-shortcut .ux-col{flex:0 0 var(--ux-col);display:grid;place-items:center end;color:var(--ux-muted)}

/* ---- locais (etiquetas de largura igual), trilha e "Selecionar" ---- */
.arq-places{margin:0}
.arq-places-seg button{min-height:44px;line-height:16px}
.arq-folder .arq-places{margin:0 0 var(--space-12)}
.arq-folder .arq-space{margin:0 0 var(--space-16)}
.arq-trail-row{display:flex;align-items:center;gap:var(--space-8);margin:0 0 var(--space-16)}
.arq-trail{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--space-4);overflow-x:auto;scrollbar-width:none;white-space:nowrap;-webkit-overflow-scrolling:touch}
.arq-trail::-webkit-scrollbar{display:none}
.arq-crumb{flex:0 0 auto;min-width:44px;min-height:44px;padding:0 var(--space-8);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);border:0;border-radius:var(--radius-8);background:transparent;color:var(--ux-link);font:500 14px var(--font-display);cursor:pointer;max-width:60vw}
.arq-crumb>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arq-crumb.is-current{color:var(--ux-text);cursor:default}
.arq-sep{flex:0 0 auto;color:var(--ux-muted);font-size:14px}
.arq-select-link{flex:0 0 auto;min-height:44px}
.arq-move-trail{margin:var(--space-12) 0}

/* ---- cabeçalho da seleção ---- */
.arq-selhead{position:sticky;top:var(--bar,0px);z-index:6;display:flex;align-items:center;gap:var(--space-8);min-height:52px;margin:0 0 var(--space-16);background:var(--ux-bg)}
.arq-selx{flex:0 0 44px;width:44px;height:44px;min-height:44px;margin-left:calc(var(--space-8) * -1);padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ux-text);cursor:pointer}
.arq-selcount{flex:1 1 auto;min-width:0;font:500 17px/24px var(--font-display);color:var(--ux-text)}
.arq-selall{flex:0 0 auto}

/* ---- lista (uma linha por item; nome em uma linha com reticências) ---- */
.arq-list{overflow:hidden}
.arq-row{display:flex;align-items:center;border-top:1px solid var(--ux-divider);padding-right:var(--space-16)}
.arq-list>.arq-row:first-child,.arq-list>.arq-move-row:first-child{border-top:0}
.arq-row.is-selected{background:var(--arq-selected)}
.arq-row-main{flex:1 1 auto;min-width:0;min-height:var(--arq-row);padding:var(--space-12) var(--space-12) var(--space-12) var(--space-16);display:flex;align-items:center;gap:var(--space-12);border:0;background:transparent;color:var(--ux-text);text-align:left;font:inherit;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.arq-row-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.arq-name{display:block;min-width:0;font-size:15px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arq-meta{display:block;margin-top:var(--space-4);font-size:13px;line-height:20px;color:var(--ux-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arq-row.is-locked .arq-name{color:var(--ux-muted)}
.arq-more{flex:0 0 var(--ux-col);width:var(--ux-col);height:44px;min-height:44px;padding:0;display:grid;place-items:center end;border:0;border-radius:var(--radius-8);background:transparent;color:var(--ux-muted);cursor:pointer}
.arq-row>.ux-col{flex:0 0 var(--ux-col);display:grid;place-items:center end;color:var(--ux-muted)}
.arq-check{flex:0 0 var(--ux-col);display:grid;place-items:center end;pointer-events:none}
.arq-check svg{box-sizing:border-box;width:22px;height:22px;padding:2px;border:2px solid var(--ux-field-line);border-radius:6px;color:transparent}
.arq-row.is-selected .arq-check svg{background:var(--ux-blue);border-color:var(--ux-blue);color:#fff}
.arq-empty{margin:0;padding:var(--space-24) var(--space-16);text-align:center;font-size:14px;line-height:20px;color:var(--ux-muted)}
.arq-empty p{margin:0 0 var(--space-8)}
.arq-note{margin:var(--space-12) 0 0;font-size:13px;line-height:20px;color:var(--ux-muted)}
.arq-note[hidden]{display:none}
.arq-more-link{margin-top:var(--space-8)}
.arq-total{margin:var(--space-12) 0 0;font-size:13px;line-height:20px;color:var(--ux-muted)}

/* ---- barra da seleção (fixa no rodapé; presa na coluna no computador) ---- */
.arq-bar{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--space-8)}
.arq-bar-btn{min-width:0;min-height:56px;padding:var(--space-4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);border:0;border-radius:var(--radius-10);background:transparent;color:var(--ux-text);font:500 12px/16px var(--font-display);cursor:pointer}
.arq-bar-btn.is-danger{color:var(--ux-red)}
.arq-bar-btn:disabled{opacity:.4;cursor:default}
.arq-bar-note{max-width:var(--page-max);margin:0 auto var(--space-8);font-size:12px;line-height:16px;color:var(--ux-muted);text-align:center}

/* ---- painel do arquivo ---- */
.arq-sheet .ux-sheet-head h2{min-width:0}
.arq-sheet-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arq-sheet-head{display:flex;align-items:center;gap:var(--space-12);margin:0 0 var(--space-16)}
.arq-sheet-info{flex:1 1 auto;min-width:0}
.arq-sheet-meta{display:block;font-size:14px;line-height:20px;color:var(--ux-muted)}
.arq-saved-row{display:flex;flex-direction:column;gap:var(--space-4);margin:0 0 var(--space-16);padding:var(--space-12) 0;border-top:1px solid var(--ux-divider);border-bottom:1px solid var(--ux-divider)}
.arq-saved-label{font-size:13px;line-height:20px;color:var(--ux-muted)}
.arq-saved{font-size:15px;line-height:22px;color:var(--ux-text);overflow-wrap:break-word}
.arq-acts{overflow:hidden}
.arq-act{width:100%;min-height:52px;padding:0 var(--space-16);display:flex;align-items:center;gap:var(--space-12);border:0;border-top:1px solid var(--ux-divider);background:transparent;color:var(--ux-text);text-align:left;font:400 15px/22px var(--font-display);cursor:pointer}
.arq-acts>.arq-act:first-child{border-top:0}
.arq-act svg{flex:0 0 auto;color:var(--ux-label)}
.arq-act.is-danger,.arq-act.is-danger svg{color:var(--ux-red)}
.arq-sheet-note{margin:var(--space-12) 0 0;font-size:13px;line-height:20px;color:var(--ux-muted)}

/* ---- diálogos (Nova pasta, Renomear, Nome repetido, Excluir) ---- */
.arq-dialog .ux-sheet-head h2{overflow-wrap:anywhere}
.arq-dialog .ux-field{margin:0}
.arq-dialog-error{margin:var(--space-8) 0 0;font-size:13px;line-height:20px;color:var(--ux-red)}
.arq-dialog-error[hidden]{display:none}
.ux-confirm .ux-sheet-body p.arq-confirm-name{margin-top:var(--space-8);font-size:14px;line-height:20px;color:var(--ux-muted);overflow-wrap:anywhere}
.arq-conflict-name{overflow-wrap:anywhere}
.arq-sticky-choice{margin-top:var(--space-16)}

/* ---- mover ---- */
.arq-move .arq-places{margin-top:var(--space-4)}
.arq-move-row{width:100%;border-top:1px solid var(--ux-divider);padding-right:var(--space-16)}
.arq-move-row .arq-name{flex:1 1 auto}
.arq-move-row .ux-col{flex:0 0 var(--ux-col);display:grid;place-items:center end;color:var(--ux-muted)}

/* ---- puxar para atualizar ---- */
.arq-pull{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:var(--space-8);font-size:13px;line-height:20px;color:var(--ux-muted);transition:height .15s ease}
.arq-pull.is-on{transition:none}
.arq-pull.is-ready{color:var(--ux-link)}
.arq-pull.is-busy svg{animation:arq-spin 1s linear infinite}
@keyframes arq-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.arq-pull.is-busy svg{animation:none}}

@media (hover:hover) and (pointer:fine){
 .arq-row:not(.is-selected):hover,.arq-move-row:hover,.arq-recent-card:hover,.arq-shortcut:hover,.arq-act:hover,.arq-crumb:not(.is-current):hover,.arq-bar-btn:hover:not(:disabled),.arq-selx:hover{background-color:var(--ux-hover)}
 .arq-more:hover{color:var(--ux-text)}
}

/* ---- computador: painel de dados de até 1200 px ---- */
@media (min-width:1024px){
 .arq-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24);align-items:end}
 .arq-top>.ux-section{margin:0}
 .arq-top>.arq-shortcut:only-child{grid-column:1/-1;max-width:calc(50% - var(--space-12))}
 .arq-folder .arq-btns{max-width:400px}
 .arq-places,.arq-folder .arq-space{max-width:720px}
 .arq-row-text{flex-direction:row;align-items:center;gap:var(--space-16)}
 .arq-row-text>.arq-name{flex:1 1 auto}
 .arq-row-text>.arq-meta{flex:0 0 280px;margin-top:0;text-align:right}
 .arq-bar{grid-template-columns:repeat(var(--n,4),minmax(0,120px));justify-content:center}
}