/* ==========================================================================
   Vistazo Admin — 移动端适配补丁
   挂载方式: patches/admin-html/admin-mobile.css（index.html 末尾引入）
   覆盖范围: ≤900px 平板/手机，重点 ≤640px 手机
   ========================================================================== */

/* ---------- 0. 全局：杜绝横向溢出 ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body { height: 100dvh; }

/* iOS 输入框聚焦自动放大 → 统一 16px */
@media (max-width: 900px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ---------- 1. 汉堡按钮 + 遮罩 ---------- */
.vz-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: rgba(11, 122, 88, .08);
  color: #0b7a58;
  cursor: pointer;
  padding: 0;
  flex: 0 0 40px;
  -webkit-tap-highlight-color: transparent;
}
.vz-burger:active { background: rgba(11, 122, 88, .18); }
.vz-burger svg { width: 20px; height: 20px; display: block; }

.vz-nav-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 15, .48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1100;
  opacity: 0;
  transition: opacity .24s ease;
}
body.vz-nav-open .vz-nav-mask { display: block; opacity: 1; }

/* ---------- 2. 侧边栏 → 抽屉 ---------- */
@media (max-width: 900px) {
  .app-container {
    height: 100dvh;
    overflow: hidden;
  }

  .sidebar-container,
  .sidebar-container--collapsed {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(272px, 84vw) !important;
    max-width: min(272px, 84vw) !important;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    box-shadow: 6px 0 32px rgba(3, 22, 16, .34);
    will-change: transform;
  }
  .sidebar-container.vz-nav-visible,
  body.vz-nav-open .sidebar-container {
    transform: translateX(0);
  }

  /* 抽屉内菜单项加大触摸区 */
  .app-nav-bar .pwc-menu-item__content,
  .app-nav-bar .pwc-sub-menu__content {
    min-height: 46px;
    font-size: 14px;
  }
  .workspace-links { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

  /* 主内容区占满屏幕 */
  .app-container .main-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto;
  }
}

/* ---------- 3. 顶栏 ---------- */
@media (max-width: 900px) {
  .top-nav-bar {
    height: 52px;
    padding: 0 10px 0 8px !important;
    gap: 6px;
  }
  .top-nav-bar .header-left { display: none !important; }

  .vz-burger { display: inline-flex; }

  .top-nav-bar .tools {
    gap: 8px !important;
    margin-left: auto;
    line-height: 1.2 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }
  .top-nav-bar .tools::-webkit-scrollbar { display: none; }

  .top-nav-bar .tools .header-link,
  .top-nav-bar .tools .header-user,
  .top-nav-bar .tools .dropdown-box { font-size: 13px; white-space: nowrap; }

  /* 邮箱过长会挤爆：截断 */
  .top-nav-bar .tools .dropdown-box .text-box .user-email {
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-main {
    height: calc(100% - 52px) !important;
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }
}

/* ---------- 4. 内容容器 ---------- */
@media (max-width: 900px) {
  .main-content-shell {
    padding: 14px 12px !important;
    border-radius: 10px;
    overflow-x: hidden !important;
  }
  .main-content-shell > * { min-width: 0; max-width: 100%; }

  /* 通用：flex/grid 子项防撑破 */
  .main-content-shell [style*="min-width"] { min-width: 0 !important; }

  /* 页面标题区：标题与操作按钮改上下排列 */
  .page-section-header { margin-bottom: 14px; }
  .page-section-header--has-actions .page-section-header__heading {
    padding-right: 0 !important;
  }
  .page-section-header__actions {
    position: static !important;
    justify-content: flex-start !important;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .page-section-header__title { font-size: 17px !important; line-height: 1.35; }
  .page-section-header__heading .c-breadcrumb-nav__comp {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }
}

/* ---------- 5. 表格：容器内横向滚动，不撑破页面 ---------- */
@media (max-width: 900px) {
  .main-content-shell [class*="table-wrap"],
  .main-content-shell [class*="table-scroll"],
  .main-content-shell [class*="tableWrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 表格本身保持可读宽度，由外层 wrap 横向滚动承接 */
  .overview-ranking-tables-section__table { min-width: 520px !important; }
  .overview-watch__table { min-width: 460px !important; }

  /* Element 表格内部滚动 */
  .el-table { width: 100% !important; }
  .el-table__body-wrapper { overflow-x: auto !important; }
  .el-table th, .el-table td { padding: 8px 6px !important; }
  .el-table .cell { font-size: 13px !important; word-break: break-word; }

  /* 排行的视频标题不要 nowrap 越界 */
  .overview-ranking-tables-section__video-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
}

/* ---------- 6. 栅格降为单列 ---------- */
@media (max-width: 900px) {
  /* 关键：1fr 的隐含最小宽度是 auto，会被表格内容撑开 → 必须 minmax(0,1fr) */
  .overview-kpi-row-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .overview-analysis-row,
  .overview-bottom-row,
  .overview-watch__grid,
  .overview-watch__tables,
  .overview-watch__kpis { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }

  .overview-analysis-row > *,
  .overview-bottom-row > *,
  .overview-kpi-row-grid > *,
  .overview-watch__grid > *,
  .overview-watch__kpis > *,
  .overview-container > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .overview-account-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

  /* KPI 卡片瘦身：原厂一张卡 200px 高，390px 屏一屏只看得到 2 张多。
     墨西哥用户多数拿手机看「今天播了多少」，信息密度不够就得来回滚。 */
  .overview-kpi-card {
    min-height: 0 !important;
    padding: 11px 12px !important;
    grid-template-rows: auto !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 1px 10px !important;
    align-items: center;
  }
  .overview-kpi-icon { width: 38px !important; height: 38px !important; }
  .overview-kpi-icon svg { width: 20px !important; height: 20px !important; }
  .overview-kpi-card__value { font-size: 24px !important; line-height: 1.15 !important; }
  .overview-kpi-card__title { font-size: 13px !important; line-height: 1.3 !important; }
  .overview-kpi-card__subtitle,
  .overview-kpi-card__delta { font-size: 11.5px !important; line-height: 1.35 !important; }
  .overview-kpi-card__sparkline { display: none !important; }
  /* 卡片之间的间距也收一点 */
  .overview-kpi-row-grid { gap: 8px !important; }

  .overview-ranking-tables-section,
  .overview-account-panel,
  .overview-video-trends-section,
  .overview-watch,
  .overview-rich-panel {
    min-height: 0 !important;
    padding: 14px 12px !important;
  }
  .overview-video-trends-section__chart-wrap { min-height: 240px !important; }
  .overview-video-trends-section__chart { height: 240px !important; }
  .overview-video-trends-section__filters { gap: 8px !important; }
  .overview-video-trends-section__custom-label { flex: 0 0 100%; }
  .overview-video-trends-section__date {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  .overview-video-trends-section__tabs { flex-wrap: wrap; }

  /* 侧栏信息栅格 */
  .overview-quota dl { grid-template-columns: 84px 1fr !important; gap: 10px 8px; }
  .overview-quota dd { text-align: right; }
}

/* ---------- 7. 表单 / 按钮 触摸友好 ---------- */
@media (max-width: 900px) {
  .plv-button, .el-button, button.el-button, .cuplayer-button__loading {
    min-height: 40px;
  }
  .el-input__inner, .el-textarea__inner, .el-select .el-input__inner {
    height: 40px;
    line-height: 40px;
  }
  /* .el-dialog / .el-drawer 是真正的弹窗盒子，可以给固定宽度；
     .plv-dialog 不同 —— 它是**全屏遮罩层**（absolute 四边贴 0，内部 flex 居中），
     原厂却写了 min-width:1280px，手机上会把布局视口撑到 1280，
     表现就是「弹窗只露出左边一角，得缩小才能看全」。所以必须单独处理。 */
  .el-dialog, .el-drawer {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }
  .plv-dialog {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    /* 原厂「OFERTA DE LANZAMIENTO」浮层是 position:fixed + z-index:99999，
       还会压在资源选择弹窗上面挡住列表，这里把弹窗整体抬上去 */
    z-index: 100000 !important;
  }
  /* el-dialog 的层级在 wrapper 上，必须抬 wrapper 本身，抬 .el-dialog 无效 */
  .el-dialog__wrapper, .v-modal { z-index: 100000 !important; }
  /* 面板宽度是组件 prop 写死的内联 800px，只能 !important 压 */
  .plv-dialog .plv-dialog__container {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    margin: 0 auto !important;
  }
  .plv-dialog .plv-dialog__body {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .el-dialog__body { padding: 14px !important; }
  .el-form-item__label { float: none !important; display: block; text-align: left; padding: 0 0 6px !important; }
  .el-form-item__content { margin-left: 0 !important; }
  .el-date-editor.el-input, .el-date-editor--daterange { width: 100% !important; }

  /* 分页器换行 */
  .el-pagination { flex-wrap: wrap; gap: 6px; justify-content: center; }
}

/* ---------- 8. 空白态 / 图表 ---------- */
@media (max-width: 900px) {
  .overview-watch__funnel,
  .overview-watch__table-scroll,
  .overview-watch__trend { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .overview-funnel-viz { min-width: 0 !important; }
  .overview-funnel-viz__row {
    grid-template-columns: 60px minmax(0, 1fr) 56px !important;
    gap: 6px !important;
  }
  .overview-funnel-viz__label { font-size: 11px !important; }
  .overview-funnel-viz__block { min-width: 44px !important; font-size: 13px !important; }
}

/* ---------- 9. 推广弹窗（vod-widgets 注入）---------- */
@media (max-width: 900px) {
  #vod-ad { padding: 0 12px; }
  #vod-ad .box {
    width: 100% !important;
    max-width: 440px !important;
    padding: 26px 18px 20px !important;
  }
  #vod-ad h2 { font-size: 18px !important; }
  #vod-ad p { font-size: 12px !important; }
  #vod-ad .btn { width: 100%; padding: 13px 16px !important; }

  /* 右下购买按钮避让 */
  #vod-order-btn {
    right: 12px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* 手机上改成底部 sheet：原来整屏压暗 + 居中弹窗，用户一进来先被广告挡住，
   看不到自己的数据；改成分屏后仍保留促销入口，但不遮住正文。 */
@media (max-width: 640px) {
  #vod-ad {
    align-items: flex-end !important;
    background: rgba(10, 20, 16, .38) !important;
    padding: 0 !important;
  }
  #vod-ad .box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 24px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    animation: vzSheetUp .3s cubic-bezier(.32, .72, 0, 1) both;
    box-shadow: 0 -12px 40px rgba(4, 30, 22, .4);
  }
  @keyframes vzSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  #vod-ad .box::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    width: 38px; height: 4px;
    margin-left: -19px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .28);
  }
  #vod-ad h2 { font-size: 17px !important; line-height: 1.35 !important; }
  #vod-ad p { font-size: 12.5px !important; margin-bottom: 14px !important; }
  /* 关闭按钮放大到 44px 拇指命中区（原来 20px 很难点中） */
  #vod-ad .close {
    top: 2px !important;
    right: 2px !important;
    width: 44px;
    height: 44px;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
  }
  #vod-ad .btn { min-height: 46px; }
}

/* ---------- 10. 视频管理 / 自定义页面：双栏 → 上下堆叠 ---------- */
@media (max-width: 900px) {
  .secure-page-panel {
    padding: 14px 12px !important;
    border-radius: 10px;
    overflow: visible !important;
  }

  /* 关键：左栏（文件夹树）+ 右栏（列表）改上下 */
  .page-content {
    flex-direction: column !important;
    overflow: visible !important;
    min-height: 0;
  }

  .category-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e2e8f0;
    max-height: 168px;
    overflow-y: auto;
    padding-bottom: 8px;
  }

  .page-content .video-list-container,
  .page-content .custom-page-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* 表格在自身容器内横向滚动，不再被压成 141px */
  .video-table {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  .video-table .plv-table,
  .video-table .plv-table-header,
  .video-table .plv-table-body { min-width: 760px; }

  /* 手机端视频列表修复：
     1) 组件「右侧固定列」克隆层在手机上定位错乱（与主表头叠成双层、操作列被挤出屏），
        直接禁用，操作列回到主表内横向滑动可达；
     2) 隐藏三列低价值信息（上传者/时间/大小）；
     3) 表格行改用 flex 排布、每列显式定宽（40+100+200+100+320=760px），
        不依赖浏览器表格列宽算法（fixed 布局下 colgroup/JS 内联宽度会打架）。 */
  .video-table .plv-table__right__fixed { display: none !important; }
  .video-table .plv-table-header__th:nth-child(4),
  .video-table .plv-table-header__th:nth-child(6),
  .video-table .plv-table-header__th:nth-child(7),
  .video-table .plv-table-body td:nth-child(4),
  .video-table .plv-table-body td:nth-child(6),
  .video-table .plv-table-body td:nth-child(7) { display: none !important; }
  .video-table .plv-table-header,
  .video-table .plv-table-body { width: 760px !important; min-width: 0 !important; }
  .video-table .plv-table-header tr,
  .video-table .plv-table-body tr { display: flex !important; width: 760px !important; align-items: stretch !important; }
  .video-table .plv-table-header th,
  .video-table .plv-table-body td { display: block !important; flex: 0 0 auto !important; box-sizing: border-box !important; }
  .video-table .plv-table-header th:nth-child(1),
  .video-table .plv-table-body td:nth-child(1) { width: 40px !important; }
  .video-table .plv-table-header th:nth-child(2),
  .video-table .plv-table-body td:nth-child(2) { width: 100px !important; }
  .video-table .plv-table-header th:nth-child(3),
  .video-table .plv-table-body td:nth-child(3) { width: 200px !important; }
  .video-table .plv-table-header th:nth-child(5),
  .video-table .plv-table-body td:nth-child(5) { width: 100px !important; }
  .video-table .plv-table-header th:nth-child(8),
  .video-table .plv-table-body td:nth-child(8) { width: 320px !important; }

  /* 顶部标题带：并排信息改上下 */
  .video-index-page-band { margin-bottom: 14px !important; }
  .video-index-page-band__titles {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    height: auto !important;
  }
  .video-index-page-band__cell--side,
  .video-index-page-band__cell--main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .video-index-page-band__main-actions {
    position: static !important;
    justify-content: flex-start !important;
    margin-top: 8px;
  }
  .video-index-page-band__title { font-size: 16px !important; }

  /* 底部搜索/批量操作条换行 */
  .video-list-container .bottom-controls {
    flex-wrap: wrap !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* 批量按钮不再被压缩，文字不裁切 */
  .bottom-controls button,
  .bottom-action-bar button,
  .bottom-controls .plv-button,
  .bottom-action-bar .plv-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap;
  }
  .video-list-container .bottom-controls .search-wrapper {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
  .video-list-container .action-bar {
    position: static !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .video-list-container .list-header { flex-wrap: wrap; gap: 8px; }
  .video-list-container .pagination-wrapper { flex-wrap: wrap; gap: 6px; justify-content: center; }
}

/* ---------- 11. 自定义页面编辑器：小屏下工具栏可滚动，预设栏收起 ---------- */
@media (max-width: 900px) {
  .editor-material-toolbar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .editor-presets-sidebar {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 220px;
    overflow-y: auto;
  }
  .editor-header, .header-right { flex-wrap: wrap; gap: 8px; }
  .preview-btn-wrapper { position: static !important; }

  .pwc-table { width: 100% !important; }
  .pwc-table-header, .pwc-table-body { min-width: 780px !important; }
  /* 列宽不再被压扁，文字不拆行（横向滚动查看） */
  .pwc-table-header-cell__content,
  .pwc-table-body-cell__content,
  .pwc-table-body-cell__inner {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pwc-table-body-cell__inner { display: inline-block; max-width: 100%; }
  .pwc-table-header-wrap { -webkit-overflow-scrolling: touch; }
}

/* ---------- 12. 表单页（账户信息 / 修改密码）：标签上、输入框满宽 ---------- */
@media (max-width: 900px) {
  .secure-page-panel,
  .secure-page-panel.account-info-content,
  .account-info-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;   /* 原厂 min-width:800px 会撑破手机屏 */
    box-sizing: border-box;
    height: auto !important;
    min-height: 0;
  }

  .account-info-form,
  .change-password-form,
  .plv-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .plv-form-item {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap;
    margin-bottom: 14px !important;
  }
  .plv-form-item__label,
  .plv-form-item__label__content,
  .plv-form-item__label__content__inner {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
  .plv-form-item__content,
  .plv-form-item__content__inner {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }

  .plv-input,
  .plv-input__main,
  .plv-input__main__input,
  .plv-input__main__input__inner,
  .plv-textarea,
  .plv-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .page-section-header__divider { max-width: 100% !important; }
}

/* ---------- 13. 登录页 ---------- */
@media (max-width: 900px) {
  /* 卡片放宽，左右各留 12px，避免 80% + min-width:280px 的挤压 */
  .c-login__main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 24px 12px 12px !important;
    box-sizing: border-box;
  }
  .c-login .el-form,
  .c-login .c-form,
  .c-login .g-login-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  .c-login .el-form-item { margin-bottom: 16px !important; }
  .c-login .el-form-item__content { width: 100% !important; }

  /* 验证码行：输入框可压缩，图片定宽不缩 */
  .captcha-container {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    box-sizing: border-box;
  }
  .captcha-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 46px !important;
    box-sizing: border-box;
  }
  .captcha-image {
    flex: 0 0 auto !important;
    width: 104px !important;
    height: 46px !important;
    object-fit: cover;
  }

  /* 登录按钮与输入框触摸高度 */
  .c-login .el-button,
  .c-login .plv-button { width: 100%; min-height: 46px; }
  .c-login .el-input__inner,
  .c-login .g-login-input .el-input__wrapper { min-height: 46px; }

  /* 记住密码 / 忘记密码一行 */
  .c-login .el-checkbox,
  .c-login .login-extra { font-size: 13px; }
}

/* ---------- 15. 取消平板上的一刀切缩放（原 vod-widgets 注入 html{zoom:.75}） ----------
   0.75 缩放会把 13px 正文压成 9.7px，触控区也跟着变小。
   本文件已提供真正的响应式布局，这里恢复 1:1 渲染。 */
@media (max-width: 999px) {
  html { zoom: 1 !important; }
}

/* ---------- 16. 顶栏精简（≤600px） ----------
   390px 实测：tools 容器 326px，Configuración(105)+Idioma(66)+邮箱(148)+gap = 328px，
   配合 justify-content:flex-end 会把超出的 2px 从左侧裁掉（"Configuración" 的 C 被切）。
   这里改成「左组靠左 / 邮箱靠右」的两端对齐，并把各元素压缩到总宽有余量。 */
@media (max-width: 600px) {
  .top-nav-bar { padding: 0 6px !important; gap: 4px; }
  .top-nav-bar .tools {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start !important;
    gap: 2px !important;
    overflow: hidden;
    padding-left: 1px;
  }
  /* Estadísticas 在侧边栏菜单里也有，小屏先让位给配置与语言
     （注意：三个链接分属不同父级，不能用 :first-of-type） */
  .top-nav-bar .tools > .header-link { display: none !important; }
  .top-nav-bar .header-link {
    padding: 0 4px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  /* 邮箱盒子单独推到最右端，和左侧两个链接形成两端对齐。
     同时允许它收缩：系统字体放大时先压邮箱，不挤掉左边的配置/语言。 */
  .top-nav-bar .tools > .dropdown-box:last-child {
    margin-left: auto !important;
    flex: 0 1 auto !important;
    min-width: 0;
  }
  .top-nav-bar .text-box { min-width: 0 !important; }
  /* 特异性要盖过第 3 节的 108px（同为 5 个类，靠顺序取胜） */
  .top-nav-bar .tools .dropdown-box .text-box .user-email {
    display: block;
    max-width: 118px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px !important;
  }
  .top-nav-bar .plv-admin-icon-arrow-down { margin-left: 2px !important; }
}

/* ---------- 16.5 「选择资源」弹窗内部：两栏改上下堆叠 ----------
   结构：.material-selector(flex column) > .material-main(flex row)
           ├ .group-sidebar 200px（左侧分组）
           └ .material-content 1fr（右侧网格 + 分页）
   370px 宽下右侧只剩 120px，搜索框和分页被压成 88px 直接裁掉，
   所以窄屏改成上下排：分组条在上（限高可滑），资源区占满余下空间。 */
@media (max-width: 600px) {
  .plv-dialog .material-selector {
    height: auto !important;
    max-height: calc(100vh - 210px) !important;
  }
  .plv-dialog .material-main { flex-direction: column !important; }

  .plv-dialog .material-main > .group-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    max-height: 148px;
    overflow-y: auto;
    border-right: 0 !important;
    border-bottom: 1px solid #e2e8f0;
  }
  .plv-dialog .material-main > .group-sidebar .group-list {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .plv-dialog .material-main > .material-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  /* 右侧工具条（搜索 / 视图切换）与分页在窄屏允许换行 */
  .plv-dialog .material-content .filter-bar {
    width: 100% !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .plv-dialog .material-content .filter-bar input,
  .plv-dialog .material-content .filter-bar .search,
  .plv-dialog .material-content .filter-bar .search-box {
    width: 100% !important;
    max-width: 100% !important;
  }
  .plv-dialog .material-content .footer,
  .plv-dialog .material-content .material-pagination {
    width: 100% !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}

/* ---------- 17. 图表等比缩放，不做横向滚动 ---------- */
@media (max-width: 900px) {
  .overview-video-trends-section__chart-wrap,
  .overview-video-trends-section__chart {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .overview-video-trends-section__chart canvas,
  .main-content-shell canvas {
    max-width: 100% !important;
    display: block;
  }
}

/* ---------- 18. 右下角「Ordenar servicio」浮动按钮避让 ----------
   手机上表格的分页、批量操作都在右下角，按钮挪到左下角减少遮挡。 */
@media (max-width: 900px) {
  #vod-order-btn {
    right: auto !important;
    left: 10px !important;
    bottom: 10px !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    border-radius: 22px !important;
    box-shadow: 0 6px 16px rgba(4, 121, 86, .4) !important;
  }
  .main-content-shell { padding-bottom: 76px !important; }

  /* 抽屉展开时让位 */
  body.vz-nav-open #vod-order-btn { opacity: 0 !important; pointer-events: none !important; }
}

/* ---------- 19. 概览页两张数据表：适配 320px 可用宽度，不再横向溢出 ---------- */
@media (max-width: 900px) {
  /* (1) Ranking de vídeos：原表 635px，5 列。改定宽 + 省略号 */
  .overview-ranking-tables-section__table-wrap { overflow-x: hidden !important; }
  .overview-ranking-tables-section__table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  .overview-ranking-tables-section__table th,
  .overview-ranking-tables-section__table td {
    padding: 8px 5px !important;
    font-size: 12px !important;
    vertical-align: middle;
  }
  .overview-ranking-tables-section__table th {
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word;
  }
  .overview-ranking-tables-section__table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overview-ranking-tables-section__table th:nth-child(1),
  .overview-ranking-tables-section__table td:nth-child(1) {
    width: 24px;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: center;
  }
  .overview-ranking-tables-section__table th:nth-child(n + 3),
  .overview-ranking-tables-section__table td:nth-child(n + 3) {
    width: 56px;
    text-align: right;
  }
  .overview-ranking-tables-section__video { min-width: 0 !important; display: flex; align-items: center; }
  .overview-ranking-tables-section__table td:nth-child(2),
  .overview-ranking-tables-section__table td:nth-child(2) * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }
  .overview-ranking-tables-section__table td:nth-child(2) { padding-right: 8px !important; }
  .overview-ranking-tables-section__video-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overview-ranking-tables-section__cover,
  .overview-ranking-tables-section__cover-empty {
    flex: 0 0 auto;
    width: 34px !important;
    height: 34px !important;
    margin-right: 6px;
  }

  /* (2) Detalle de conversión：6 列共 376px，压缩到可用宽度 */
  .overview-rich-table__head,
  .overview-rich-table__row {
    grid-template-columns: minmax(52px, 1fr) 40px 46px 54px 42px 42px !important;
    column-gap: 2px !important;
  }
  .overview-rich-table__row b,
  .overview-rich-table__row .is-ok {
    display: inline-block;
    max-width: 100%;
    padding: 1px 4px !important;
    font-size: 9.5px !important;
    line-height: 1.5;
    border-radius: 5px;
    text-align: center;
  }
  .overview-rich-table__head span {
    font-size: 10.5px !important;
    letter-spacing: -.2px;
  }
  .overview-rich-table__head span,
  .overview-rich-table__row > * {
    font-size: 11px !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overview-rich-table__head span:nth-child(n + 2),
  .overview-rich-table__row > *:nth-child(n + 2) { text-align: right; }
}

/* ---------- 20. 视频列表底部操作栏：按钮换行 + 搜索框独占一行 ---------- */
@media (max-width: 900px) {
  .bottom-action-bar {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .bottom-action-bar .search-wrapper {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    order: 3;
  }
  .bottom-action-bar .search-wrapper .plv-input,
  .bottom-action-bar .search-wrapper input {
    width: 100% !important;
    box-sizing: border-box;
  }
  .bottom-action-bar > div:empty { display: none !important; }
  .bottom-action-bar .pagination-wrapper {
    flex: 1 1 auto !important;
    order: 4;
    justify-content: flex-end;
    font-size: 12.5px;
  }
}

/* ---------- 14. 超小屏 ---------- */
@media (max-width: 380px) {
  .main-content-shell { padding: 10px 8px !important; }
  .overview-kpi-card__value { font-size: 23px !important; }
  .overview-quota dl { grid-template-columns: 72px 1fr !important; }
}

/* 320-340px：概览页详情表 6 列最低要 288px，可用宽度只有约 280，
   收紧列宽才能不靠裁剪兜底（墨西哥仍有不少 320px 宽的入门机） */
@media (max-width: 340px) {
  .overview-rich-table__head,
  .overview-rich-table__row {
    grid-template-columns: minmax(44px, 1fr) 34px 34px 46px 28px 42px !important;
    column-gap: 1px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .overview-rich-table__head { font-size: 10px !important; }
  .overview-ranking-tables-section__table th,
  .overview-ranking-tables-section__table td { padding: 7px 3px !important; }
}

/* ==========================================================================
   21. 拇指优先操作层（México mobile-first）
   --------------------------------------------------------------------------
   依据：墨西哥 ~78% 流量来自手机，Android 占八成，WhatsApp 内置浏览器是
   主要入口，机型多为 360-412px。用户习惯单手拇指操作、讨厌打字、
   讨厌被弹窗挡住看不到自己在做什么。这里做三件事：
     (1) 主操作按钮吸到底部拇指区（复制按钮，不改 Vue 的 DOM）
     (2) 触控目标统一 ≥44px（原厂 29-36px，误触率高）
     (3) 底部浮层让位，避免盖住保存/分页
   ========================================================================== */

@media (max-width: 900px) {
  /* ---- (1) 吸底主操作栏 ---- */
  .vz-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid #e3eae6;
    box-shadow: 0 -4px 18px rgba(9, 40, 30, .09);
    box-sizing: border-box;
    animation: vz-ab-in .22s ease both;
  }
  @keyframes vz-ab-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* 主 CTA：占满剩余宽度，52px 高（拇指舒适区） */
  .vz-actionbar__primary {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border: 0;
    border-radius: 12px;
    background: #0b7a58;
    color: #fff;
    font: 600 16px/1 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease, background .15s ease;
    box-shadow: 0 6px 16px rgba(11, 122, 88, .28);
  }
  .vz-actionbar__primary:active {
    transform: scale(.975);
    background: #096b4d;
  }
  .vz-actionbar__primary[disabled] { opacity: .5; box-shadow: none; }
  .vz-actionbar__primary svg { width: 20px; height: 20px; flex: 0 0 20px; }

  /* 次要动作：平面按钮，不抢主按钮视觉 */
  .vz-actionbar__secondary {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #cfdcd6;
    border-radius: 12px;
    background: #fff;
    color: #204a3c;
    font: 600 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .vz-actionbar__secondary:active { background: #f2f7f4; }

  /* 吸底栏出现时，正文底部留出空间，避免最后一行被压住 */
  body.vz-has-actionbar .app-main,
  body.vz-has-actionbar .main-content-shell {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 输入时（键盘弹起）先收起吸底栏，免得跟键盘抢位置 */
  body.vz-kb-open .vz-actionbar,
  body.vz-ad-open .vz-actionbar {
    transform: translateY(120%);
    transition: transform .18s ease;
  }

  /* 吸底栏在场时，右侧留出 60px 给「Ordenar servicio」，
     把它收进底部栏里当图标按钮 —— 比浮在内容上更不容易挡住分页 */
  body.vz-has-actionbar .vz-actionbar { padding-right: 68px; }
  body.vz-has-actionbar #vod-order-btn {
    left: auto !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: 50px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 0 !important;
    line-height: 52px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }
  body.vz-has-actionbar #vod-order-btn::before {
    content: "🛒";
    font-size: 19px;
    line-height: 1;
  }

  /* ---- (2) 触控目标 ≥44px ---- */
  /* 顶栏三件套（配置/语言/账户）原本 36-38px，误触率高 */
  .top-nav-bar .tools > .header-link,
  .top-nav-bar .tools > .dropdown-box {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .vz-burger {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
  /* 概览页筛选 pill（Reproducciones / Últimos 7 días …）原 33px */
  .overview-video-trends-section__tabs button,
  .overview-video-trends-section__tabs [role="tab"],
  .overview-video-trends-section__tabs .tab-item,
  .overview-video-trends-section [class*="pill"],
  .overview-video-trends-section__filter {
    min-height: 42px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box;
  }
  /* 侧栏底部的外链（Ver mi sitio / Pruebas y atención）原 30px */
  .workspace-links a,
  .workspace-links button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* 「Ver todos / Ver todas / Mi cuenta / Cambiar clave」这类文字链，
     原厂 29-34px 高，手指宽的用户很容易点错 */
  .overview-kpi-card__more,
  .overview-section-title__action,
  .overview-ranking-tables-section__action,
  .overview-ranking-tables-section__footer-link,
  .overview-rich-panel__footer-link,
  .overview-account-actions__btn,
  a[class*="more-link"] {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }
  /* 悬浮购买按钮原 36px，撑到 44 拇指命中线 */
  #vod-order-btn { min-height: 44px !important; }

  /* 侧栏菜单项（含二级）加高，手指更容易点中 */
  .pwc-menu-item,
  .pwc-sub-menu__title {
    min-height: 46px !important;
  }

  /* ---- (3) 分页器：文案不被截断 ---- */
  .el-pagination__sizes .el-input__inner,
  .bottom-action-bar .pagination-wrapper .el-input__inner {
    min-width: 96px;
    padding-right: 6px;
  }
  /* 「25 / página」在某些宽度仍会被 ellipsis 吃掉，直接放宽盒子 */
  .el-pagination__sizes,
  .pagination-wrapper .plv-select {
    min-width: 104px !important;
  }
  .el-pagination__sizes .el-select,
  .pagination-wrapper .plv-select {
    width: 104px !important;
  }

  /* ---- (3.6) 视频列表：搜索框 + 放大镜按钮原 32px，太小 ---- */
  .bottom-action-bar .search-wrapper,
  .search-wrapper {
    min-height: 42px;
  }
  .bottom-action-bar .search-btn,
  .search-wrapper .search-btn {
    min-width: 44px;
    min-height: 42px;
    flex: 0 0 44px;
  }
  .bottom-action-bar .search-wrapper .plv-input,
  .bottom-action-bar .search-wrapper input {
    min-height: 42px;
  }

  /* ---- (3.8) 页面管理：搜索框 + "Crear página" 一行放不下 ----
     原厂 filter-bar 是 flex nowrap，左块定宽 + 右按钮 105px，
     320-360px 屏上必然捅出屏幕（实测超出 48px 后被 html overflow 裁掉）。
     让左块可收缩，实在放不下再换行。 */
  .filter-bar {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  .filter-bar .left-filters {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }
  .filter-bar .left-filters .plv-input,
  .filter-bar .left-filters input {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .filter-bar .right-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* ---- (4) 表单页：标签紧贴输入框，一屏多看几个字段 ---- */
  .account-info-content .el-form-item,
  .account-info-content .plv-form-item {
    margin-bottom: 14px !important;
  }
  .account-info-content .el-form-item__label,
  .account-info-content .plv-form-item__label {
    padding-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* 保存按钮原在页面最底部、被浮动按钮压住 → 交给吸底栏接管，
     页内那个收掉，避免出现两个一模一样的「Guardar」 */
  body.vz-has-actionbar [data-vz-dup="1"] {
    display: none !important;
  }

  /* ---- (5) 日期范围选择器：本地化为 dd/mm/aaaa ---- */
  .el-date-range-picker,
  .el-picker-panel {
    max-width: calc(100vw - 16px) !important;
  }
  .el-date-editor .el-range-input { font-size: 14px !important; }

  /* ---- (6) 点击态统一：Android 上给明确反馈，减少「点了没反应」的错觉 ---- */
  .plv-button:active,
  .el-button:active,
  .pwc-menu-item:active {
    filter: brightness(.94);
  }

  /* ---- (7) 复选框：原厂 8-14px，手指根本点不中。
     只放大方块本身 + 用行高撑开可点区域；不动 display，
     否则「Recordar cuenta」会被挤到下一行。 ---- */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
  }
  .el-checkbox__inner,
  .plv-checkbox__inner {
    width: 20px !important;
    height: 20px !important;
  }
  /* 放大后方块里的对勾按原 14px 定位，需要重新居中 */
  .el-checkbox__inner::after {
    left: 7px !important;
    top: 3px !important;
    height: 9px !important;
  }
  .el-checkbox,
  .plv-checkbox {
    min-height: 42px;
    line-height: 42px;
  }

  /* ---- (8) 登录/注册页：浮动购买按钮回右侧，别压住底部版权与注册链接 ---- */
  body.vz-auth-page #vod-order-btn {
    left: auto !important;
    right: 12px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 12.5px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
  }
}

/* 超小屏（320-360，墨西哥仍有大量入门机） */
@media (max-width: 380px) {
  .vz-actionbar { padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .vz-actionbar__primary { height: 50px; font-size: 15px; border-radius: 11px; }
  .vz-actionbar__secondary { height: 50px; padding: 0 12px; font-size: 13px; }
  .top-nav-bar { height: 50px; }
  body.vz-has-actionbar .vz-actionbar { padding-right: 62px; }
  body.vz-has-actionbar #vod-order-btn {
    width: 46px !important;
    height: 50px !important;
    right: 8px !important;
    bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---------- 22. 上传视频页（Subir vídeo）：原厂左右两栏在手机上把上传区顶出屏幕 ----------
   原厂：.upload-container{display:flex} + .upload-options{width:380px;flex-shrink:0;margin-right:20px}
   390px 视口里左栏就吃掉 400px，右侧 .upload-right-panel（拖拽上传区）被挤到 x=422，
   完全在屏幕外，而全局又禁了横向滚动 → 用户只看到设置项，永远找不到上传按钮。
   这里改成上下堆叠，并把上传区提到最前面。 */
@media (max-width: 900px) {
  .upload-container {
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .upload-options {
    width: 100% !important;
    margin-right: 0 !important;
    flex-shrink: 1 !important;
  }

  /* 上传区排到设置项上方：先给「选文件」，再谈水印/防录屏这些可选项 */
  .upload-right-panel {
    order: -1;
    width: 100% !important;
    flex: none !important;
    margin-bottom: 18px;
  }

  .upload-right-panel .upload-video-component {
    width: 100% !important;
  }

  .upload-right-panel .upload-video-component .upload-action {
    width: 100% !important;
    min-height: 128px !important;
    padding: 18px 12px !important;
  }

  .upload-right-panel .upload-video-component .upload-action .upload-text {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .upload-right-panel .upload-tips {
    margin-top: 12px;
  }

  .upload-right-panel .warning-banner {
    align-items: flex-start !important;
  }

  .upload-right-panel .warning-banner .warning-text {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}