/* Bandeja de permisos: solo presentación, delimitada a este módulo. */
/* Duración compartida por la ficha y la bandeja, sin colores fijos de tema. */
/* La nueva columna no debe comprimir fechas, acciones ni el nombre del tipo.
   En fichas angostas el scroll queda dentro de la tabla, nunca en la página. */
#view-permisos.permisos-workbench .perm-page { padding:24px; max-width:1760px; margin:auto; }
#view-permisos.permisos-workbench .perm-eyebrow { font-size:10px; font-weight:750; letter-spacing:.13em; color:var(--ds-muted); }
#view-permisos.permisos-workbench #perm-header-badge { font-size:10px; color:var(--ds-text-secondary); background:var(--ds-surface); border:1px solid var(--ds-border); }
#view-permisos.permisos-workbench #perm-kpi-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0; margin:0 0 20px; }
#view-permisos.permisos-workbench #perm-kpi-strip>div { border:0; border-left:1px solid var(--ds-border); padding:0 22px; background:transparent; box-shadow:none; border-radius:0; animation:none; }
#view-permisos.permisos-workbench #perm-kpi-strip>div:first-child { border-left:0; padding-left:0; }
#view-permisos.permisos-workbench #perm-top-tabs { border-top:1px solid var(--ds-border); padding-top:10px; gap:8px; }
#view-permisos.permisos-workbench #perm-top-tabs button { border-radius:8px 8px 0 0; padding:12px 16px; color:var(--ds-muted); }
#view-permisos.permisos-workbench #perm-top-tabs .active { color:var(--ds-accent); box-shadow:inset 0 -2px var(--ds-accent); background:var(--ds-accent-soft); }
#view-permisos.permisos-workbench .perm-corte-carga { padding:10px 14px; border:1px solid var(--ds-border); border-radius:10px; background:var(--ds-surface); font-size:12px; }
#view-permisos.permisos-workbench .perm-corte-carga p { font-size:11px; }
#view-permisos.permisos-workbench .perm-filter-card { padding:18px; background:var(--ds-card); border-radius:14px; box-shadow:none; }
#view-permisos.permisos-workbench .perm-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
#view-permisos.permisos-workbench .perm-search-control { min-width:180px; max-width:none; min-height:42px; padding:9px 12px; border-radius:8px; background:var(--ds-surface); }
#view-permisos.permisos-workbench .perm-search-primary { flex:1.6; }
#view-permisos .perm-func-buscador { position:relative; }
#view-permisos .perm-func-toggle { flex:none; width:30px; height:30px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ds-text-secondary); cursor:pointer; }
#view-permisos .perm-func-toggle:hover { background:var(--ds-accent-soft); color:var(--ds-accent); }
#view-permisos .perm-func-popup { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:45; border:1px solid var(--ds-border); border-radius:10px; background:var(--ds-card,#fff); background:rgb(from var(--ds-card,#fff) r g b / 1); color:var(--ds-text); box-shadow:0 12px 30px rgba(0,0,0,.16); backdrop-filter:blur(18px); overflow:hidden; }
#view-permisos .perm-func-popup[hidden] { display:none; }
#view-permisos .perm-func-estado { padding:9px 12px; font-size:11px; color:var(--ds-muted); border-bottom:1px solid var(--ds-border); }
#view-permisos #perm-func-lista { max-height:min(300px,40vh); overflow-y:auto; overscroll-behavior:contain; }
#view-permisos .perm-func-opcion { display:flex; flex-direction:column; gap:3px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--ds-border); text-align:left; overflow-wrap:anywhere; }
#view-permisos .perm-func-opcion:last-child { border-bottom:0; }
#view-permisos .perm-func-opcion:hover, #view-permisos .perm-func-opcion[aria-selected="true"] { background:var(--ds-accent-soft); }
#view-permisos .perm-func-opcion strong { font-size:12px; color:var(--ds-text); }
#view-permisos .perm-func-opcion span { font-size:11px; color:var(--ds-text-secondary); }
#view-permisos .perm-func-opcion small { font-size:10px; color:var(--ds-muted); }
#view-permisos.permisos-workbench .perm-search-primary>span { font-size:22px; line-height:1; }
#view-permisos.permisos-workbench .perm-reset { font-size:11px; white-space:nowrap; min-height:40px; }
#view-permisos.permisos-workbench .perm-view-switcher { margin-left:auto; white-space:nowrap; }
#view-permisos.permisos-workbench .perm-type-disclosure { margin-top:16px; border-top:1px solid var(--ds-border); padding-top:14px; }
#view-permisos.permisos-workbench .perm-type-disclosure summary { cursor:pointer; font-size:12px; font-weight:650; color:var(--ds-text-secondary); }
#view-permisos.permisos-workbench #perm-tipo-resumen { margin-left:10px; font-size:11px; font-weight:500; color:var(--ds-accent); }
#view-permisos.permisos-workbench #perm-tipo-chips { display:flex; flex-wrap:wrap; gap:6px; padding-top:12px; }
#view-permisos.permisos-workbench #perm-estado-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
#view-permisos.permisos-workbench .ds-chip { border-radius:7px; font-size:11px; padding:6px 10px; cursor:pointer; }
#view-permisos.permisos-workbench .perm-control-grid { display:grid; grid-template-columns:minmax(240px,1fr) minmax(210px,290px) 110px; gap:18px; align-items:start; margin-top:16px; }
#view-permisos.permisos-workbench .perm-filter-label { font-size:11px; font-weight:650; text-transform:none; letter-spacing:0; color:var(--ds-muted); }
#view-permisos.permisos-workbench .perm-control-grid select { display:block; margin-top:5px; min-height:38px; padding:8px 10px; width:100%; border-radius:8px; background:var(--ds-surface); color:var(--ds-text); }
#view-permisos.permisos-workbench .perm-alert-shortcut { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border:1px solid var(--ds-border); border-left:3px solid var(--ds-warn); background:var(--ds-card); color:var(--ds-text); border-radius:12px; text-align:left; cursor:pointer; }
#view-permisos.permisos-workbench .perm-alert-shortcut strong { font-size:13px; }
#view-permisos.permisos-workbench .perm-alert-shortcut small { display:block; color:var(--ds-muted); font-size:11px; margin-top:4px; }
#view-permisos.permisos-workbench .perm-alert-shortcut>span:last-child { color:var(--ds-accent); font-size:12px; white-space:nowrap; }
#view-permisos.permisos-workbench .perm-results-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:10px 2px 16px; }
#view-permisos.permisos-workbench .perm-results-heading h2 { margin:5px 0 0; font-size:18px; font-weight:700; letter-spacing:-.025em; color:var(--ds-text); }
#view-permisos.permisos-workbench #perm-resultados-resumen { font-size:12px; color:var(--ds-muted); }
#view-permisos.permisos-workbench .perm-person-name { font-size:12px; font-weight:650; letter-spacing:-.01em; }
#view-permisos.permisos-workbench .perm-grupo-anio { background:var(--ds-surface); padding:12px 18px; font-size:12px; border-top:0; }
#view-permisos.permisos-workbench .perm-grupo-tipo { padding:10px 18px; border-left:2px solid var(--ds-accent); }
#view-permisos.permisos-workbench .perm-detalle .perm-close-detail { width:100%; margin-bottom:8px; }
#view-permisos.permisos-workbench #perm-alertas-aps table { border-collapse:collapse; min-width:760px; }
#view-permisos.permisos-workbench #perm-alertas-aps th { padding:10px; border-bottom:1px solid var(--ds-border); color:var(--ds-muted); font-size:10px; text-transform:uppercase; }
#view-permisos.permisos-workbench #perm-alertas-aps td { padding:12px 10px; border-bottom:1px solid var(--ds-border); vertical-align:top; }
#view-permisos.permisos-workbench :is(button,summary,.ds-chip,select):focus-visible { outline:2px solid var(--ds-accent); outline-offset:3px; }
/* Prevalecer sobre los colores fijos de Nova, incluidos en el tema oscuro. */
body.ui-2026.ui-nova #view-permisos.permisos-workbench #perm-kpi-strip>div { min-width:0; background:transparent; }
@container (max-width:1389px) {
  #view-permisos.permisos-workbench .perm-layout:has(.perm-detalle:not(:empty))>.perm-detalle { grid-row:1; }
}
@media (max-width:1100px) {
  #view-permisos.permisos-workbench .perm-control-grid { grid-template-columns:1fr 1fr 100px; }
  #view-permisos.permisos-workbench .perm-toolbar .perm-search-control { flex-basis:35%; }
}
@media (max-width:700px) {
  #view-permisos.permisos-workbench .perm-page { padding:12px; }
  #view-permisos.permisos-workbench #perm-header-actions { flex-wrap:wrap; }
  #view-permisos.permisos-workbench #perm-kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0; }
  #view-permisos.permisos-workbench #perm-kpi-strip>div { padding:0 14px; }
  #view-permisos.permisos-workbench #perm-kpi-strip>div:nth-child(3) { padding-left:0; border-left:0; }
  #view-permisos.permisos-workbench .perm-control-grid { grid-template-columns:1fr 100px; gap:12px; }
  #view-permisos.permisos-workbench .perm-status-filter { grid-column:1/-1; }
  #view-permisos.permisos-workbench .perm-toolbar .perm-search-control { min-width:0; flex-basis:100%; }
  #view-permisos.permisos-workbench .perm-alert-shortcut { align-items:flex-start; }
}

/* ═══ Mesa de trabajo: ancho completo, filtros laterales y detalle deslizante ═══
   .view.active es display:flex: con margin:auto la página se encogía al ancho
   de su contenido (~900 px en una pantalla de 1.900). width:100% la estira y
   max-width la sigue acotando en monitores muy anchos. */
#view-permisos.permisos-workbench .perm-page { width:100%; box-sizing:border-box; flex:1 1 auto; min-width:0; margin:0 auto; padding:20px 24px 40px; }
#view-permisos.permisos-workbench #perm-kpi-strip { margin-bottom:14px; }
#view-permisos.permisos-workbench .perm-corte-carga { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:8px 14px; }
#view-permisos.permisos-workbench .perm-corte-carga p { margin:0; color:var(--ds-muted); }
#view-permisos.permisos-workbench .perm-search-control kbd { margin-left:auto; font:600 10px/1 var(--font, inherit); color:var(--ds-muted); border:1px solid var(--ds-border); border-radius:5px; padding:3px 6px; background:var(--ds-card); }

/* El detalle es un panel deslizante a la derecha: la lista no se mueve ni se
   angosta al seleccionar un permiso. Sin contenedor de consultas en la lista
   (un contenedor atraparía el position:fixed). */
@media (min-width:981px) {
  #view-permisos #perm-lista { container-type:normal; }
  #view-permisos.permisos-workbench .perm-layout,
  #view-permisos.permisos-workbench .perm-layout:has(.perm-detalle:not(:empty)) { grid-template-columns:minmax(0,1fr); }
  #view-permisos.permisos-workbench .perm-detalle:not(:empty) {
    position:fixed; top:16px; right:16px; bottom:16px; width:min(400px, calc(100vw - 32px)); max-height:none;
    overflow-y:auto; z-index:60; padding:14px; border-radius:14px; background:var(--ds-surface);
    border:1px solid var(--ds-border); box-shadow:0 24px 60px rgba(15,23,42,.22); animation:permDrawerIn .18s ease-out both;
  }
  #view-permisos.permisos-workbench .perm-detalle .perm-close-detail { position:sticky; top:-14px; z-index:1; }
}
@keyframes permDrawerIn { from { transform:translateX(24px); opacity:0 } to { transform:none; opacity:1 } }

/* Pantallas anchas: filtros en una columna lateral fija y resultados al lado.
   Desde 1.600 px: por debajo, la tabla (≈1.000 px) no cabe junto a los filtros
   y los filtros vuelven arriba, a lo ancho. */
@media (min-width:1600px) {
  #view-permisos.permisos-workbench #perm-operativo-wrap {
    display:grid; grid-template-columns:280px minmax(0,1fr); column-gap:20px; align-items:start;
    grid-template-areas:"filtros solapes" "filtros alertas" "filtros lista" "filtros calendario";
  }
  #view-permisos.permisos-workbench #perm-solapamientos { grid-area:solapes; }
  #view-permisos.permisos-workbench #perm-alertas-aps { grid-area:alertas; }
  #view-permisos.permisos-workbench #perm-lista-wrap { grid-area:lista; }
  #view-permisos.permisos-workbench #perm-calendario { grid-area:calendario; }
  #view-permisos.permisos-workbench .perm-filter-card {
    grid-area:filtros; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow-y:auto; padding:16px;
    border:1px solid var(--ds-border);
  }
  #view-permisos.permisos-workbench .perm-filter-card .perm-toolbar { flex-direction:column; align-items:stretch; gap:8px; }
  #view-permisos.permisos-workbench .perm-filter-card .perm-search-control { min-width:0; max-width:none; flex:none; box-sizing:border-box; width:100%; }
  #view-permisos.permisos-workbench .perm-filter-card .perm-search-control input { min-width:0; width:100%; }
  #view-permisos.permisos-workbench .perm-filter-card .perm-view-switcher { margin-left:0; display:flex; }
  #view-permisos.permisos-workbench .perm-filter-card .perm-reset { order:9; }
  #view-permisos.permisos-workbench .perm-filter-card .perm-control-grid { grid-template-columns:1fr; gap:14px; }
  #view-permisos.permisos-workbench .perm-filter-card .perm-type-disclosure[open] #perm-tipo-chips { max-height:260px; overflow-y:auto; }
  #view-permisos.permisos-workbench .perm-results-heading { padding-top:0; }
  #view-permisos.permisos-workbench #perm-solapamientos:not([style*="none"]) { margin-bottom:12px; }
}