/* Layout: lista a pantalla completa. VLC abre al dar play. */
html, body, #root {
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  overflow: hidden;
}
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  width: 100% !important;
  height: 100%;
}
.app .right,
.right,
.preview-row,
.player-wrap,
.player-toolbar {
  display: none !important;
}
.app .left,
.left {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  border-right: none !important;
}

button, input, select, textarea {
  max-width: 100%;
}
button {
  min-height: 40px;
}
button.icon {
  width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
}

.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 8px 0;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  white-space: nowrap;
}

.panel {
  padding: 10px;
  gap: 10px;
}
.row {
  flex-wrap: wrap;
}
.card input {
  width: 100%;
  min-width: 0;
}
.card-title input {
  font-size: 16px;
}
.card-actions {
  gap: 8px;
}
.card-actions button:not(.icon) {
  min-height: 40px;
}

.meta-strip {
  flex-wrap: wrap;
  word-break: break-word;
  line-height: 1.4;
}

.dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
}
textarea.notes {
  min-height: min(240px, 45dvh);
}

.subtabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.subtabs button {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  button, input, select, textarea {
    font-size: 16px;
  }
  .row > .grow,
  .row > input,
  .row > select {
    flex: 1 1 100%;
  }
  .row > button {
    flex: 1 1 100%;
  }
  .muted {
    font-size: 13px;
  }
  .card {
    padding: 10px;
  }
  .list {
    gap: 10px;
  }
}

@media (min-width: 900px) {
  .left {
    max-width: 920px;
    margin: 0 auto;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
  .tabs {
    overflow: visible;
    flex-wrap: wrap;
  }
  .row {
    flex-wrap: nowrap;
  }
  .row > button {
    flex: 0 0 auto;
  }
}