/* ===== Arquivos ===== */

.files-wrap{
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem 2rem;
}

.files-wrap h1{
  text-align: center;
  margin: 70px 0 1rem; /* topo fixo em 70px */
  color: var(--secondary); /* azul da identidade */
}

/* Barra de ações */
.files-actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .7rem;
  box-shadow: var(--shadow);
  margin-bottom: .8rem;
}

.files-actions .left, .files-actions .right{
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}

.files-actions input[type="search"],
.files-actions select,
.meta-area{
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .65rem;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  color: var(--text);
  font: inherit;
}

.meta-area{ width: 260px; max-width: 42vw; }

/* Botões */
.btn{
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--primary); color: #fff; border-radius: 10px;
  padding: .55rem .9rem; font-weight: 700; cursor: pointer; border: none;
}
.btn:hover{ opacity: .95; }

.ghost{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
.danger{
  color: var(--danger, #b94c4c);
  border: 1px solid var(--danger-border, #e1b8b8);
  background: transparent;
}

button.mini{
  padding: .35rem .55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer; font-weight: 600;
}
button.mini:hover{
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
button.mini.danger{
  color: var(--danger, #b94c4c);
  border-color: var(--danger-border, #e1b8b8);
}

/* Dropzone */
.files-drop{
  text-align: center;
  background: var(--card);
  border: 2px dashed var(--primary);
  color: color-mix(in srgb, var(--text) 70%, var(--border));
  border-radius: 14px;
  padding: 1.6rem .8rem;
  margin-bottom: .9rem;
}
.files-drop.dragover{
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 75%, var(--secondary));
}

/* Lista */
.files-list{
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.list-head, .row{
  display: grid;
  grid-template-columns: 36px 2.2fr 0.9fr 1.1fr 1.2fr 1.1fr 1.4fr;
  align-items: center;
  gap: .5rem;
}

.list-head{
  padding: .6rem .7rem;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 85%, var(--border));
}

.rows .row{
  padding: .55rem .7rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.rows .row:nth-child(odd){
  background: color-mix(in srgb, var(--card) 98%, var(--bg));
}

.name{ display: inline-flex; align-items: center; gap: .5rem; }
.name .icon{ font-size: 1rem; }
.f-rename{
  display:none; width: 100%;
  padding: .35rem .45rem; border:1px solid var(--border); border-radius:8px;
  background: var(--card); color: var(--text);
}
.f-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tags .f-tags{
  width: 100%;
  border: 1px solid var(--border); border-radius: 8px; padding: .35rem .45rem;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  color: var(--text); font: inherit;
}

.size, .type, .date{
  color: color-mix(in srgb, var(--text) 70%, var(--border));
  font-size: .95rem;
}

@media (max-width: 900px){
  .list-head, .row{
    grid-template-columns: 32px 1.8fr 0.9fr 1fr 1fr 1fr 1.2fr;
  }
}
@media (max-width: 700px){
  .list-head, .row{
    grid-template-columns: 28px 2fr 1fr 0.8fr 1fr; /* some cols colapsam */
  }
  .type, .date{ display:none; }
}