/* =========================================================================
   素材列表（Mediateca / #/secure/material）表格布局修正
   -------------------------------------------------------------------------
   与主题无关：默认风格、官网风格都生效。只调整列宽与截断方式，
   不改任何结构、不加删列。

   原问题（列宽由组件写死在 <table style="width:1408px"> + <colgroup> 上）：
     · 表格总宽 1408px，而 1440 窗口下可视区只有 944px
     · 操作列 position:sticky; right:0; width:300px，永远贴在可视区右侧，
       把「创建时间」整列盖住 → 时间看不到
     · ID 列 200px：id-text（32 位哈希，203px）先占满，末尾的「Copiar」
       按钮被 flex 压成 24px 宽，渲染成一个绿色小圆点，并溢出到创建者列
     · 创建者列 100px：10 个字符（77px）+ 32px 内边距放不下 → 折成两行
     · 「Recurso」列 340px 里标题却只分到 176px（缩略图占 100px）

   修正思路：表格宽度改为跟随容器、列宽按百分比分配（不再固定 1408px），
   正常窗口下整张表刚好铺满、无需横向滚动；右侧的固定操作列因此没有内容可遮，
   「创建时间」整列稳定可见。素材标题允许两行，把信息尽量展示全。
   ========================================================================= */

/* ---------- 1. 表格宽度：完全跟随容器，正常窗口下不需要横向滚动 ---------- */
.material-table .pwc-table-header,
.material-table .pwc-table-body{
  width:100% !important;
  /* 保底 1000：窗口足够时按比例铺满、不出现滚动条；更窄才退回横向滚动 */
  min-width:1000px;
}

/* ---------- 2. 列宽按比例分配（表头表体两套 colgroup 必须一致） ----------
   勾选 4% / 素材 27% / ID 12.5% / 创建者 10% / 创建时间 13.5% / 状态 7.5% / 标签 8.5% / 操作 17%
   素材列占近三成：它是唯一需要读文字的一列，缩得太狠会立刻出现省略号；
   标签列要能放下 "Vincular" / "etiquetas" 两个词，否则会断在单词中间。
   不用固定 px：容器变宽时各列一起变宽，始终铺满且不会溢出 —— 这样就不需要
   横向滚动，右侧固定操作列也就没有内容可遮，那条分界线自然不存在了。 */
.material-table .pwc-table-header col:nth-child(1),
.material-table .pwc-table-body col:nth-child(1){ width:4% !important; }
.material-table .pwc-table-header col:nth-child(2),
.material-table .pwc-table-body col:nth-child(2){ width:27% !important; }
.material-table .pwc-table-header col:nth-child(3),
.material-table .pwc-table-body col:nth-child(3){ width:12.5% !important; }
.material-table .pwc-table-header col:nth-child(4),
.material-table .pwc-table-body col:nth-child(4){ width:10% !important; }
.material-table .pwc-table-header col:nth-child(5),
.material-table .pwc-table-body col:nth-child(5){ width:13.5% !important; }
.material-table .pwc-table-header col:nth-child(6),
.material-table .pwc-table-body col:nth-child(6){ width:7.5% !important; }
.material-table .pwc-table-header col:nth-child(7),
.material-table .pwc-table-body col:nth-child(7){ width:8.5% !important; }
.material-table .pwc-table-header col:nth-child(8),
.material-table .pwc-table-body col:nth-child(8){ width:17% !important; }

/* ---------- 3. 单元格左右内边距 16 → 10，八列共省出 96px 给内容 ---------- */
.material-table .pwc-table-header-cell__content,
.material-table .pwc-table-body-cell__content{
  padding-left:10px;
  padding-right:10px;
}

/* ---------- 4. 素材单元：占满整列，标题两行 ----------
   .material-info 原本是 inline-flex（宽度随内容收缩），
   改成撑满整列后，标题区能多拿到约 40px。
   .title 的 white-space/display 被组件 scoped 样式（同权重但注入更晚）压住，
   所以这里加一级选择器权重并补 !important。 */
.material-table .pwc-table-row .material-info{
  display:flex !important;
  align-items:center;
  gap:10px !important;
  width:100% !important;
  /* 组件原本给了 max-width:calc(100% - 20px)，凭空吃掉 20px，去掉 */
  max-width:none !important;
}
/* 上层 inner 是 inline-flex（宽度随内容收缩），要先把它的宽度撑到整格，
   下面 .material-info 的 width:100% 才有参照物，否则仍是内容宽度 */
.material-table .pwc-table-row>td:nth-child(2) .pwc-table-body-cell__inner{
  width:100%;
}
.material-table .pwc-table-row .material-info .title{
  white-space:normal !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden !important;
  line-height:18px;
  max-height:36px;
  word-break:break-word;
}

/* ---------- 5. ID 列：哈希可省略，复制按钮不许被压扁 ---------- */
.material-table .material-id{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.material-table .material-id .id-text{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.material-table .material-id .plv-button{
  flex:0 0 auto;
  white-space:nowrap;
  padding:0 6px;
}

/* ---------- 6. 创建者 / 创建时间：单行显示，超长省略而不是折行 ---------- */
.material-table .pwc-table-row>td:nth-child(4) .pwc-table-body-cell__inner{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.material-table .pwc-table-row>td:nth-child(5) .pwc-table-body-cell__inner{
  white-space:nowrap;
}

/* ---------- 7. 操作列 ----------
   不要再给固定列加任何分隔阴影：表格既然不再横向溢出，固定列就退化成普通列，
   那条竖线只会变成一道没有意义的接缝（横向一滚动还会突然消失）。 */
.material-table .action-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:6px 10px;
}

/* ---------- 8. 确实需要横向滚动时，把滚动条显出来（原样式是 display:none） ---------- */
.material-table .pwc-table-body-wrap::-webkit-scrollbar,
.material-table .pwc-table-header-wrap::-webkit-scrollbar{
  display:block;
  height:10px;
}
.material-table .pwc-table-body-wrap::-webkit-scrollbar-thumb,
.material-table .pwc-table-header-wrap::-webkit-scrollbar-thumb{
  background:#d5ded8;
  border-radius:6px;
}
.material-table .pwc-table-body-wrap::-webkit-scrollbar-track,
.material-table .pwc-table-header-wrap::-webkit-scrollbar-track{
  background:transparent;
}

/* ---------- 9. 去掉组件自带的"冻结列阴影" ----------
   .pwc-table-fixed-shadow.is-right 是一条 8px 的渐变竖条（linear-gradient(90deg,#e5e6eb,transparent)），
   作用是提示"左边还有冻结列可以横滚"。表格现在不再横向溢出、固定列退化成普通列，
   这条阴影只剩副作用：位置由 JS 按旧列宽算，落在「状态」列左侧变成一道莫名其妙的接缝，
   而且横向一滚动它还会重新定位、忽隐忽现。直接隐掉。 */
.material-table .pwc-table-fixed-shadow{
  display:none !important;
}

/* ---------- 10. 状态标签与标签按钮不要再逐字换行 ----------
   .status-tag 的 white-space 是 normal，列宽一紧 "Subido" 就被拆成 "Subid/o"；
   标签按钮 (Vincular etiquetas) 的 line-height 是 1，文字折成三行时几行会叠在一起。
   前者禁止换行，后者给正常行高并让盒子按内容撑高。 */
.material-table .status-tag{
  white-space:nowrap;
}
.material-table .pwc-table-row>td:nth-child(7) .plv-button{
  height:auto;
  line-height:18px;
  padding:3px 6px;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}

/* =========================================================================
   「页面聚合」列表（#/secure/custom-page）操作列
   -------------------------------------------------------------------------
   问题：操作列固定 250px，单元格内容区只有 218px，而
        「Editar(54) + Generar código QR(161) + ⋯(48)」自然宽度合计 263px，
        于是三颗按钮都被 flex 压缩，文字逐字换行成 "Edi/tar"、"Generar/código QR"。
   处理：与素材表同一套做法 —— 表格宽度跟随容器、列宽按百分比，
        把操作列从 250px 提到 28%，按钮不再参与压缩。
   ========================================================================= */
.custom-page-table .pwc-table-header,
.custom-page-table .pwc-table-body{
  width:100% !important;
  min-width:1080px;
}
/* Info página 24% / Estado 16% / Creada el 16% / Actualizada el 16% / Acciones 28% */
.custom-page-table .pwc-table-header col:nth-child(1),
.custom-page-table .pwc-table-body col:nth-child(1){ width:24% !important; }
.custom-page-table .pwc-table-header col:nth-child(2),
.custom-page-table .pwc-table-body col:nth-child(2){ width:16% !important; }
.custom-page-table .pwc-table-header col:nth-child(3),
.custom-page-table .pwc-table-body col:nth-child(3){ width:16% !important; }
.custom-page-table .pwc-table-header col:nth-child(4),
.custom-page-table .pwc-table-body col:nth-child(4){ width:16% !important; }
.custom-page-table .pwc-table-header col:nth-child(5),
.custom-page-table .pwc-table-body col:nth-child(5){ width:28% !important; }

/* 按钮保持自身宽度：空间不足时整颗按钮换行，而不是把按钮里的文字拆开 */
.custom-page-table .action-buttons{
  justify-content:flex-end;
  flex-wrap:wrap;
}
.custom-page-table .action-buttons>*{
  flex:none;
  white-space:nowrap;
}
/* 冻结列阴影同理，不要画 */
.custom-page-table .pwc-table-fixed-shadow{
  display:none !important;
}

/* =========================================================================
   视频列表（#/secure/video）「Acciones」列按钮
   -------------------------------------------------------------------------
   症状：文字贴边、胶囊被文字撑满；「Más」被拆成 "Má/s" 换行。
   根因（组件 5255.*.css 里的原规则）：
     .video-list-container .video-table .col-actions[data-v-x] .col-actions__btn
     .video-list-container .video-table .col-actions .more-btn[data-v-x]
   前者 padding:0、后者 width:28px 且带 !important；
   两条权重都是 (0,5,0)（4 个 class + 1 个 data-v 属性），
   比手写两层类名的 (0,2,0) 高得多，只写两层会被原规则反压回去。
   而且 Vue 的 scoped 样式是运行时注入 <head> 的，位置比我们的 link 更靠后，
   同权重时也是它赢 —— 所以这里加 html.vqr-console 前缀把权重抬到 (0,5,1)，
   再配上 !important，才能真正压住。
   -------------------------------------------------------------------------
   处理：补正常内边距与行高、禁止折行、放开「Más」的死宽度，
        列间距从 12 收到 6，让四颗按钮在 308px 的单元格里排成一行。
   ========================================================================= */
html.vqr-console .video-list-container .video-table .col-actions{
  gap:6px !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  /* 按钮有了左右 8px 内边距，首颗按钮的文字会右移 8px，
     与表头「Acciones」的左边缘错开。把整组左移同样距离，让文字重新对齐表头。 */
  margin-left:-8px !important;
}
html.vqr-console .video-list-container .video-table .col-actions .col-actions__btn{
  padding:0 8px !important;
  height:26px !important;
  line-height:26px !important;
  border-radius:8px !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  transition:background-color .15s ease, color .15s ease;
}
/* 「Más」原本 width:28px，扣掉内边距只剩 10px，两个字装不下才溢出/折行 */
html.vqr-console .video-list-container .video-table .col-actions .more-btn{
  padding:0 8px !important;
  height:26px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  border-radius:8px !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  transition:background-color .15s ease, color .15s ease;
}
/* 组件里的 arrow-down 图标带的是 plv-admin-icon-undefined，尺寸 0×0 根本画不出来，
   于是「Más」后面空着、也没有下拉的暗示。这里用两条边框拼一个同色小箭头补上。 */
html.vqr-console .video-list-container .video-table .col-actions .more-btn .plv-icon{
  flex:0 0 auto !important;
  display:block !important;
  width:5px !important;
  height:5px !important;
  margin-top:-4px !important;
  border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;
  transform:rotate(45deg);
  opacity:.6;
}

/* =========================================================================
   侧边栏收起态：弹出子菜单飘离图标栏修复（2026-10-27，与主题无关）
   -------------------------------------------------------------------------
   原问题：厂商 .pwc-menu 恒为展开宽度 width:var(--main-sidebar-width)，
   收起时只靠 .sidebar-container--collapsed（~68px）裁切视觉；但收起态的
   弹出子菜单是 Popper.js 以 .pwc-sub-menu__wrap 为参照物、placement
   right-start 定位的 —— 参照行仍是 ~240px 宽，弹出层因此出现在离图标栏
   ~290px 的内容区上，鼠标移过去途中悬停丢失即关闭。
   修复：收起态让菜单体跟随收起宽度，参照行随之变窄，
   Popper 的 right-start 自然贴住图标栏右缘，箭头也由 Popper 正确对位。
   ========================================================================= */
.sidebar-container--collapsed .pwc-menu{
  width:var(--main-sidebar-collapsed-width);
  max-width:var(--main-sidebar-collapsed-width);
}

/* =========================================================================
   概览页·聚合页漏斗卡片：长文案布局加固（2026-10-27，与主题无关）
   -------------------------------------------------------------------------
   原问题：卡片标题（如 "Embudo de páginas agregadas"）与右上「总转化率」
   同行排布，厂商 .overview-watch__panel-head 未给 h3 收缩约束，西语长标题
   换行/挤压；漏斗行标签列厂商上限 88px（窄屏 68px），西语阶段标签
   （如 "Envíos de formulario"）放不下会溢出/挤压中部图形。
   修复：标题允许收缩换行、右侧说明列不缩不换行右对齐；
   标签列放宽到 140px（窄屏 108px）并允许安全折行。
   ========================================================================= */
html.vqr-theme-site .overview-watch__panel-head{
  align-items:flex-start;
}
html.vqr-theme-site .overview-watch__panel-head h3{
  flex:1 1 auto;
  min-width:0;
  line-height:1.35;
  overflow-wrap:break-word;
}
html.vqr-theme-site .overview-watch__panel-head>span,
html.vqr-theme-site .overview-watch__panel-head>a{
  flex:0 0 auto;
  text-align:right;
}
html.vqr-theme-site .overview-funnel-viz__row{
  grid-template-columns:minmax(96px,140px) minmax(120px,1fr) minmax(64px,80px);
}
html.vqr-theme-site .overview-funnel-viz__label{
  overflow-wrap:break-word;
  word-break:normal;
}
@media (max-width:640px){
  html.vqr-theme-site .overview-funnel-viz__row{
    grid-template-columns:minmax(84px,108px) minmax(100px,1fr) minmax(48px,60px);
  }
}