@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ============================================================ Tokens */

:root {
    --ink: #17212b;
    --muted: #6d7884;
    --line: #e3e8ed;
    --surface: #fff;
    --canvas: #f5f7f9;
    --blue: #2563eb;
    --blue-soft: #edf3ff;
    --red: #d74b43;
    --red-soft: #fff0ef;
    --green: #16835e;
    --green-soft: #ecf9f3;
    --amber: #996519;
    --amber-soft: #fff4df;

    /* Las carpetas toman el tono del ámbar que ya existía, para no meter una familia nueva. */
    --folder: #c98f2c;
    --folder-soft: #fdf3de;
    --blue-line: #c9dbfb;

    /* Mínimo de las zonas pulsables. Apple recomienda 44 y Google 48; antes los
       iconos de acción medían unos 25 x 21 px y en el móvil no se acertaban. */
    --tap: 44px;

    /* Escala tipográfica con escalones reales. Antes se saltaba de 32 px a 13 px
       sin nada en medio y casi todo el texto pesaba igual. */
    --t-caption: 11.5px;
    --t-body: 13px;
    --t-row: 15px;      /* el nombre del archivo: es el contenido, no un detalle */
    --t-section: 18px;
    --t-title: 28px;
}

* { box-sizing: border-box }

html, body {
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--ink);
    background: var(--canvas);
}

h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; margin: 0 }
h1 { font-size: var(--t-title); letter-spacing: -.03em; text-wrap: balance }
h2 { font-size: var(--t-section); letter-spacing: -.01em }

/* Quien navega con el teclado necesita ver dónde está. No había ninguna regla de
   foco, así que cada navegador ponía la suya y en los botones sin borde apenas se
   distinguía. :focus-visible no molesta a quien usa el ratón. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px }

/* Routes.razor lleva <FocusOnNavigate Selector="h1">, que pasa el foco al título en
   cada navegación para que un lector de pantalla anuncie la página nueva. Es útil,
   pero dibujaba un recuadro alrededor del título nada más entrar. Un encabezado no
   es un control ni una parada del tabulador, así que se le quita el contorno sin
   que nadie pierda nada. */
h1:focus, h1:focus-visible { outline: none }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================ Estructura */

/* La navegación pasó del lateral a la cabecera: la pantalla de documentos necesita
   el ancho para el árbol, el listado y la ficha del archivo. */
.topnav {
    display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 22px;
    background: var(--surface); border-bottom: 1px solid var(--line);
}

.topnav .brand {
    display: flex; align-items: center; gap: 9px; flex-shrink: 0;
    font: 700 20px 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.02em;
}

.brand-mark {
    display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 8px; background: var(--blue); color: #fff;
    font: 700 14px 'Space Grotesk', system-ui, sans-serif;
}

.sections { display: flex; gap: 2px; margin: 0 auto }

.sections .section-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
    padding: 0 14px; border-radius: 8px; text-decoration: none; position: relative;
    color: var(--muted); font: 600 var(--t-body) 'DM Sans', system-ui, sans-serif;
}

.sections .section-link:hover { background: #f1f4f8; color: var(--ink) }
.sections .section-link.active { color: var(--ink) }

/* La sección activa se subraya en vez de rellenarse, para no competir con los chips. */
.sections .section-link.active::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 9px;
    height: 2px; background: var(--blue); border-radius: 2px;
}

.topnav-user { display: flex; align-items: center; gap: 4px; flex-shrink: 0 }
.user-chip { font-size: var(--t-body); color: var(--muted); margin-right: 4px }

.logout-button {
    background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit;
    min-height: var(--tap); padding: 0 10px; border-radius: 9px;
}

.logout-button:hover { color: var(--ink); background: #eef1f5 }

.icon-button {
    width: var(--tap); height: var(--tap); border: 0; background: none; border-radius: 9px;
    display: grid; place-items: center; cursor: pointer; color: #6b7784; flex-shrink: 0;
    text-decoration: none; font-size: 17px; line-height: 1; padding: 0;
}

.icon-button:hover { background: #eef1f5; color: var(--ink) }
.icon-button.danger:hover { background: var(--red-soft); color: var(--red) }
.icon-button.on { background: var(--blue-soft); color: var(--blue) }
.icon-button:disabled { opacity: .4; cursor: not-allowed }

.content { max-width: 1660px; margin: 0 auto; padding: 16px 22px 44px }
.mobile-title { display: none }

/* Buscador, chips y acciones en una sola barra. Las migas van debajo y son las que
   dicen dónde estás: esta pantalla ya no tiene título grande. */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px }
.toolbar-spacer { flex: 1 }
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0 }

/* Las páginas sin barra de herramientas (papelera, administración) conservan su
   cabecera con título. */
.page-heading {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 20px; margin-bottom: 20px;
}

.page-heading-main { min-width: 0 }

.muted { color: var(--muted); font-size: var(--t-body) }
.padded { padding: 24px 22px }

/* ============================================================ Chips de filtro */

/* Los filtros más frecuentes salen del panel desplegable y se quedan a la vista.
   Cuentan como búsqueda, igual que el resto: atraviesan la jerarquía de carpetas. */
.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center }

.chip {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
    border-radius: 20px; border: 1px solid var(--line); background: var(--surface);
    color: #4f5d6b; cursor: pointer; white-space: nowrap;
    font: 600 12.5px 'DM Sans', system-ui, sans-serif;
}

.chip:hover { border-color: #c8d3de; color: var(--ink) }
.chip.on { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue) }
.chips .divider { width: 1px; height: 22px; background: var(--line); margin: 0 3px; flex-shrink: 0 }

/* ============================================================ Botones */

.button {
    border: 0; border-radius: 8px; padding: 0 16px; cursor: pointer; min-height: var(--tap);
    text-decoration: none; font: 600 var(--t-body) 'DM Sans', system-ui, sans-serif;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

.button.primary { background: var(--blue); color: #fff }
.button.secondary { background: #eef1f4; color: var(--ink) }
.button.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line) }
.button.danger { background: var(--red); color: #fff }
.button.small { min-height: 38px; padding: 0 12px; font-size: 12px }
.button:disabled { opacity: .5; cursor: not-allowed }

/* ============================================================ Búsqueda y filtros */

.search-row { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap }

.search-box {
    background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
    display: flex; align-items: center; gap: 10px; padding: 0 14px;
    max-width: 420px; flex: 1 1 240px; color: #9ba6b1; min-height: var(--tap);
}

.search-box.compact { max-width: 320px; flex: 0 1 320px }

.search-box input {
    border: 0; outline: 0; width: 100%; color: var(--ink);
    font: var(--t-body) 'DM Sans', system-ui, sans-serif; background: transparent;
}

.filter-button {
    background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
    padding: 0 16px; min-height: var(--tap); color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font: 600 var(--t-body) 'DM Sans', system-ui, sans-serif;
}

.filter-panel {
    display: flex; align-items: end; gap: 12px; flex-wrap: wrap; background: #eef3f8;
    border: 1px solid var(--line); border-radius: 8px; padding: 15px; margin-bottom: 18px;
}

.filter-panel label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12px; color: var(--muted); font-weight: 600;
}

.filter-panel input, .filter-panel select {
    border: 1px solid #d4dce4; background: #fff; border-radius: 7px; padding: 0 10px;
    min-height: var(--tap); font: var(--t-body) 'DM Sans', system-ui, sans-serif; color: var(--ink);
}

/* ============================================================ Biblioteca */

/* Árbol, listado y ficha del archivo. La ficha es la tercera columna que justifica
   haber subido la navegación a la cabecera. */
.workspace-grid { display: grid; grid-template-columns: 262px minmax(0, 1fr) 322px; gap: 18px; align-items: start }

.tree-panel, .file-panel, .admin-panel, .stat-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}

.tree-panel { padding: 10px 8px; height: max-content; position: sticky; top: 16px }

.tree-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 8px 12px; font: 600 13px 'Space Grotesk', system-ui, sans-serif;
}

.tree-head button {
    background: none; border: 0; color: var(--blue); cursor: pointer;
    font: 600 12px 'DM Sans', system-ui, sans-serif; padding: 3px 5px; border-radius: 5px;
}

.tree-head button:hover { background: var(--blue-soft) }

.tree, .tree ul { list-style: none; margin: 0; padding: 0 }

/* La guía vertical hace legible la profundidad sin contar sangrías; la sangría es
   corta porque cada nivel se lleva ancho del nombre y estas rutas son largas. */
.tree ul { margin-left: 10px; padding-left: 7px; border-left: 1px solid var(--line) }

/* La fila envuelve el desplegador y el nombre: son dos botones distintos, porque
   desplegar una rama y entrar en ella son acciones diferentes. */
.tree-row { display: flex; align-items: center; border-radius: 8px; min-height: 40px }
.tree-row:hover { background: #f1f4f8 }
.tree-row.selected { background: var(--blue-soft) }
.tree-row.selected .tree-item, .tree-row.selected .ico-folder { color: var(--blue) }
.tree-row.selected .tree-item { font-weight: 600 }

/* Al arrastrar algo encima. El borde interior evita que la fila cambie de tamaño. */
.tree-row.drop-target { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue) }

.tree-item {
    display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
    background: none; border: 0; text-align: left; cursor: pointer;
    padding: 0 10px 0 0; height: 40px; color: #4f5d6b;
    font: var(--t-body) 'DM Sans', system-ui, sans-serif;
}

.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.tree-count {
    margin-left: auto; color: #9ba6b1; font-size: 11px;
    font-variant-numeric: tabular-nums; padding-left: 6px;
}

.twisty {
    width: 34px; height: 40px; flex-shrink: 0; border: 0; background: none; border-radius: 8px;
    padding: 0; display: grid; place-items: center; color: #97a3ae; cursor: pointer;
}

.twisty svg { width: 9px; height: 9px; fill: currentColor; transition: transform .12s ease }
.twisty.open svg { transform: rotate(90deg) }
.twisty.leaf { visibility: hidden; cursor: default }

.tree-hint { font-size: 11.5px; color: var(--muted); padding: 12px 9px 2px; margin: 0; line-height: 1.5 }

/* ---------------------------------------------------------------- Iconos */

.ico { width: 17px; height: 17px; flex-shrink: 0; fill: currentColor }
.ico-folder { color: var(--folder) }
.ico-sm { width: 13px; height: 13px }

/* ---------------------------------------------------------------- Migas */

/* La barra de migas solo queda dentro del panel para el encabezado de resultados. */
.crumb-row { padding: 10px 16px; border-bottom: 1px solid var(--line) }
.crumb-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px }

.crumbs { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; margin-bottom: 2px }
.crumbs + .page-heading { margin-top: 0 }

.crumbs .crumb, .crumbs .up {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
    color: var(--muted); padding: 6px 8px; border-radius: 6px; cursor: pointer;
    font: 500 var(--t-body) 'DM Sans', system-ui, sans-serif;
}

.crumbs .crumb:hover, .crumbs .up:hover { background: #eaeff4; color: var(--ink) }
.crumbs .sep { color: #b7c2cc; padding: 0 1px }
/* Es la carpeta abierta y no hay título grande que la repita: va en negrita. */
.crumbs .current { color: var(--ink); font-weight: 700; padding: 6px 8px }

.crumbs .up { border: 1px solid var(--line); color: var(--ink); margin-right: 6px; font-weight: 600 }

.search-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--t-body) }

.file-panel { min-width: 0 }

.section-toolbar {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 8px 16px; min-height: 56px; border-bottom: 1px solid var(--line);
}

.section-toolbar select {
    border: 1px solid var(--line); padding: 0 10px; border-radius: 8px; min-height: 38px;
    color: var(--muted); background: #fff; font: 12px 'DM Sans', system-ui, sans-serif;
}

.file-table { width: 100% }

/* Nombre, descripción, fecha y acciones. Dentro de una carpeta sobra la ubicación
   —la dan las migas—, así que solo se antepone al buscar, cuando los resultados
   vienen de ramas distintas. El autor salió de la tabla: vive en la ficha. */
.table-head, .file-row {
    display: grid; grid-template-columns: minmax(200px, 2.2fr) minmax(0, 1.4fr) 124px 56px;
    align-items: center; gap: 12px; padding: 0 14px;
}

.table-head.with-location, .file-row.with-location {
    grid-template-columns: minmax(110px, .9fr) minmax(190px, 2.4fr) minmax(0, 1.1fr) 118px 56px;
}

.path-cell { display: flex; align-items: center; gap: 6px; color: var(--muted); min-width: 0 }
.path-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.desc-cell { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.table-head {
    color: #8b96a1; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; border-bottom: 1px solid var(--line); min-height: 38px;
}

.file-row {
    min-height: 64px; border-bottom: 1px solid #f0f3f6; font-size: var(--t-body); color: #52606d;
}

.file-row:last-child { border-bottom: 0 }

.file-row { cursor: pointer }
.file-row:hover { background: #fbfcfd }
.file-row.folder:hover { background: #fdfbf6 }

/* La fila marcada es la que se está viendo en la ficha de la derecha. */
.file-row.selected { background: var(--blue-soft) }
.file-row.selected:hover { background: #e5eeff }
.file-name { display: flex; align-items: center; gap: 12px; min-width: 0 }

/* El envoltorio del nombre es un elemento flex y su mínimo automático es el ancho del
   texto: sin esto no encoge y el nombre invade la columna de al lado. */
.file-name > div { min-width: 0 }

.file-name strong, .link-name {
    display: block; color: var(--ink); font-weight: 600; font-size: var(--t-row);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.file-name small {
    display: block; color: #9aa4ad; font-size: var(--t-caption); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.file-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.file-type {
    width: 38px; height: 42px; border-radius: 7px; display: grid; place-items: center;
    font-size: 8.5px; font-weight: 700; flex-shrink: 0; background: #eef1f4; color: #697481;
}

/* La carpeta se distingue por el icono, no por un fondo distinto: sigue siendo una fila. */
.file-row.folder .file-name { cursor: default }
.file-type.folder { background: var(--folder-soft); color: var(--folder) }
.file-type.folder .ico { width: 20px; height: 20px }

.link-name {
    background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.link-name:hover { color: var(--blue); text-decoration: underline }

.file-type.pdf { background: var(--red-soft); color: var(--red) }
.file-type.doc { background: var(--blue-soft); color: var(--blue) }
.file-type.sheet { background: var(--green-soft); color: var(--green) }
.file-type.image { background: #fff6e8; color: #c77a16 }
.file-type.video { background: #f5ecff; color: #8744bd }

.badge-private {
    background: #eef1f4; color: #697481; border-radius: 10px;
    padding: 1px 6px; font-size: 10px; font-weight: 600;
}

.actions { display: flex; align-items: center; justify-content: flex-end }

/* ---------------------------------------------------------------- Menú de fila */

/* Todas las acciones de una fila viven en este menú. Antes eran hasta cuatro glifos
   de 25 x 21 px apiñados en 96 px, imposibles de acertar con el dedo. */
.menu-anchor { position: relative }

.row-menu {
    position: absolute; z-index: 40; top: calc(100% - 6px); right: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
    padding: 6px; width: 244px; box-shadow: 0 16px 38px rgba(16, 25, 35, .2);
}

.row-menu button, .row-menu a {
    display: flex; align-items: center; gap: 11px; width: 100%; background: none;
    border: 0; padding: 0 10px; min-height: var(--tap); border-radius: 8px; cursor: pointer;
    font: var(--t-body) 'DM Sans', system-ui, sans-serif; color: #4f5d6b;
    text-align: left; text-decoration: none;
}

.row-menu button:hover, .row-menu a:hover { background: #f1f4f8; color: var(--ink) }
.row-menu button.danger { color: var(--red) }
.row-menu button.danger:hover { background: var(--red-soft) }
.row-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 3px }
.row-menu .ico { color: #97a3ae }
.row-menu button.danger .ico { color: var(--red) }
.row-menu-title { display: none }

/* Capta el clic fuera para cerrar. En el móvil además oscurece el fondo. */
.row-menu-veil { position: fixed; inset: 0; z-index: 35; background: transparent; border: 0 }

.empty-state { text-align: center; padding: 70px 20px; color: var(--muted) }
.empty-icon { color: #c3cdd6 }
.empty-icon .ico { width: 34px; height: 34px }
.empty-state h3 { font-size: var(--t-section); color: var(--ink); margin: 14px 0 6px }
.empty-state p { margin: 0; font-size: var(--t-body) }

/* ============================================================ Ficha del archivo */

/* Es de solo lectura a propósito: editar metadatos, subir una versión y ver el
   historial siguen viviendo en el diálogo de detalles, para no tener dos sitios
   donde cambiar lo mismo. */
.preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px }

.preview-label {
    font: 700 10.5px 'DM Sans', system-ui, sans-serif; text-transform: uppercase;
    letter-spacing: .09em; color: #8b96a1; padding-left: 2px; margin: 0;
}

.preview-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 11px; padding: 16px;
}

/* La miniatura es el enganche con el visualizador. Solo las imágenes tienen una de
   verdad; el resto muestra su tipo, porque generar la primera página de un PDF o un
   fotograma de vídeo exigiría una librería en el servidor. */
.preview-thumb {
    display: grid; place-items: center; border-radius: 9px; margin-bottom: 14px;
    aspect-ratio: 4 / 3; background: #f1f4f8; overflow: hidden; position: relative;
    border: 1px solid var(--line); width: 100%; padding: 0; cursor: pointer;
}

.preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.preview-thumb.pdf { background: var(--red-soft); color: var(--red) }
.preview-thumb.video { background: #f5ecff; color: #8744bd }
.preview-thumb.doc { background: var(--blue-soft); color: var(--blue) }
.preview-thumb.sheet { background: var(--green-soft); color: var(--green) }
.preview-thumb.text { background: #eef1f4; color: #697481 }
.preview-thumb.none { background: #f1f4f8; color: #8b96a1; cursor: default }
.preview-thumb .label { font: 700 15px 'Space Grotesk', system-ui, sans-serif; letter-spacing: .04em }

.preview-thumb .play {
    position: absolute; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(16, 25, 35, .62); color: #fff; display: grid; place-items: center; font-size: 19px;
}

.preview-name { font: 600 var(--t-row) 'DM Sans', system-ui, sans-serif; line-height: 1.4; margin: 0 0 12px; overflow-wrap: anywhere }

/* Las guías punteadas atan cada etiqueta con su valor: la ficha se lee en diagonal. */
.preview-meta { margin: 0 0 14px; font-size: 12.5px }

.preview-meta > div {
    display: flex; align-items: baseline; gap: 10px;
    padding: 7px 0; border-bottom: 1px dashed #e0e6ec;
}

.preview-meta dt { color: var(--muted); flex-shrink: 0 }
.preview-meta dd { margin: 0 0 0 auto; color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere }

.preview-actions { display: flex; gap: 8px }
.preview-actions .button { flex: 1 }

.preview-empty {
    background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
    padding: 32px 18px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.6;
}

.preview-empty .ico { width: 30px; height: 30px; color: #c3cdd6; margin-bottom: 10px }

/* ============================================================ Visualizador */

.viewer { position: fixed; inset: 0; z-index: 950; background: rgba(11, 17, 24, .94); display: flex; flex-direction: column }

.viewer-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #e6ebf1; flex-shrink: 0 }
.viewer-bar .name { font: 600 var(--t-row) 'DM Sans', system-ui, sans-serif; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.viewer-bar .meta { color: #93a1b0; font-size: 12px; white-space: nowrap }
.viewer-bar .spacer { flex: 1 }
.viewer-bar .icon-button { color: #c3ced9 }
.viewer-bar .icon-button:hover { background: rgba(255, 255, 255, .13); color: #fff }

.viewer-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 12px 12px; position: relative }

.viewer-stage img, .viewer-stage video {
    max-width: 100%; max-height: 100%; border-radius: 10px; display: block;
    background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

/* El PDF y el texto se delegan en el propio navegador dentro de un marco: no hace
   falta ninguna librería y en el móvil funciona igual. */
.viewer-frame {
    width: min(980px, 100%); height: 100%; border: 0; border-radius: 10px;
    background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.viewer-unsupported {
    background: var(--surface); border-radius: 12px; padding: 32px 28px;
    text-align: center; width: min(420px, 100%);
}

.viewer-unsupported .file-type { width: 56px; height: 62px; margin: 0 auto 16px; font-size: 11px }
.viewer-unsupported h3 { font-size: var(--t-section); margin-bottom: 8px }
.viewer-unsupported p { color: var(--muted); margin: 0 0 18px; line-height: 1.6 }

.viewer-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px;
    display: grid; place-items: center;
}

.viewer-nav:hover { background: rgba(255, 255, 255, .27) }
.viewer-nav:disabled { opacity: .28; cursor: default }
.viewer-nav.prev { left: 16px }
.viewer-nav.next { right: 16px }

/* ============================================================ Avisos */

.alert {
    background: var(--amber-soft); color: var(--amber); padding: 10px 14px;
    font-size: 13px; margin: 15px 22px; border-radius: 6px;
}

/* Las variantes van después de .alert para que ganen cuando se combinan clases,
   como hace Identity con class="alert alert-danger". */
/* Los márgenes de .alert están pensados para el panel de la biblioteca, que no
   tiene relleno propio. Dentro de un diálogo el cuerpo ya lo aporta y el aviso
   quedaba metido hacia dentro respecto a los campos. */
.modal-body .alert { margin: 0 0 16px }

.alert-danger { background: var(--red-soft); color: var(--red) }
.alert-info { background: var(--blue-soft); color: var(--blue) }
.alert-warning { background: var(--amber-soft); color: var(--amber) }
.alert-success { background: var(--green-soft); color: var(--green) }

/* ============================================================ Paginación */

.pager {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 22px; border-top: 1px solid var(--line);
}

.pager-button {
    background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
    padding: 8px 13px; font: 600 12px 'DM Sans', system-ui, sans-serif;
    color: var(--ink); cursor: pointer;
}

.pager-button:disabled { opacity: .45; cursor: not-allowed }
.pager-status { font-size: 12px; color: var(--muted) }

/* ============================================================ Diálogos */

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(16, 25, 35, .55);
    display: grid; place-items: center; padding: 24px; z-index: 900;
}

.modal-panel {
    background: var(--surface); border-radius: 12px; width: min(600px, 100%);
    max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 18px 48px rgba(16, 25, 35, .28);
}

.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px 10px 22px; border-bottom: 1px solid var(--line);
}

.modal-head h2 {
    font-size: var(--t-section); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Cerrar es la acción a la que más se apunta de un diálogo, y era una aspa de
   22 px sin relleno. Ahora es un cuadrado como el resto de botones de icono. */
.modal-close {
    width: var(--tap); height: var(--tap); border: 0; background: none; border-radius: 9px;
    display: grid; place-items: center; font-size: 22px; line-height: 1;
    color: var(--muted); cursor: pointer; flex-shrink: 0; padding: 0;
}

.modal-close:hover { background: #eef1f5; color: var(--ink) }

.modal-body { padding: 20px 22px; overflow-y: auto }

.modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid var(--line);
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px }
.field > span { font-size: 12px; font-weight: 600; color: var(--muted) }

.field input, .field select {
    border: 1px solid #d4dce4; background: #fff; border-radius: 7px; padding: 0 12px;
    min-height: var(--tap); font: var(--t-body) 'DM Sans', system-ui, sans-serif;
    color: var(--ink); width: 100%;
}

.field input:focus, .field select:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue) }
.field input[readonly] { background: #f6f8fa; color: var(--muted) }
.field input[type=file] { padding: 10px 12px; height: auto }
.field small { font-size: var(--t-caption); color: var(--muted) }

.picker {
    border: 1px solid var(--line); border-radius: 8px; padding: 7px;
    max-height: 234px; overflow-y: auto; background: #fdfefe; margin-bottom: 16px;
}

.picker-item {
    display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0;
    text-align: left; cursor: pointer; padding: 0 10px; min-height: var(--tap);
    border-radius: 8px; color: #4f5d6b; font: var(--t-body) 'DM Sans', system-ui, sans-serif;
}

.picker-item:hover { background: #f1f4f8; color: var(--ink) }
.picker-item.selected { background: var(--blue-soft); color: var(--blue); font-weight: 600 }
.picker-item.selected .ico-folder { color: var(--blue) }
.picker-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.field-check {
    display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px;
    padding: 10px; margin-left: -10px; border-radius: 9px; cursor: pointer;
    min-height: var(--tap);
}

.field-check:hover { background: #f4f7fa }
.field-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); flex-shrink: 0 }
.field-check span { font-size: var(--t-body) }
.field-check small { display: block; font-size: var(--t-caption); margin-top: 3px }

.detail-grid {
    display: grid; grid-template-columns: 128px 1fr; gap: 9px 16px;
    margin: 0 0 20px; font-size: var(--t-body);
}

.detail-grid dt { color: var(--muted); font-weight: 600 }
.detail-grid dd { margin: 0 }

.detail-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px }
.detail-section h3 { font-size: var(--t-row); margin-bottom: 12px }

.version-list { display: flex; flex-direction: column; gap: 2px }

.version-row {
    display: grid; grid-template-columns: 45px 1fr 80px 130px 1fr 92px;
    gap: 10px; align-items: center; padding: 6px 0; min-height: 52px;
    border-bottom: 1px solid #eef1f4; font-size: 12px;
}

.version-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.version-row.current { background: var(--blue-soft); border-radius: 8px; padding: 6px 8px }

.badge-current {
    background: var(--blue); color: #fff; border-radius: 10px;
    padding: 2px 8px; font-size: 10px; font-weight: 600; text-align: center;
}

.upload-queue { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px }
.upload-queue li { padding: 9px 0; border-bottom: 1px solid #eef1f4 }
.upload-queue li:last-child { border-bottom: 0 }

.upload-line { display: flex; align-items: baseline; gap: 10px }

.upload-line strong {
    font-weight: 600; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* El porcentaje se ancla a la derecha y usa cifras de ancho fijo: si no, el número
   baila de sitio en cada actualización y cuesta leerlo. */
.upload-percent {
    margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 600;
    color: var(--muted); font-variant-numeric: tabular-nums;
}

.upload-queue li.done .upload-percent { color: var(--green) }
.upload-queue li.failed .upload-percent { color: var(--red) }

.progress {
    height: 5px; border-radius: 3px; background: #e7ecf1;
    overflow: hidden; margin-top: 7px;
}

.progress-bar {
    height: 100%; background: var(--blue); border-radius: 3px;
    transition: width .18s linear;
}

.upload-queue li.done .progress-bar { background: var(--green) }
.upload-error { display: block; color: var(--red); font-size: 11px; margin-top: 5px }

@media (prefers-reduced-motion: reduce) {
    .progress-bar { transition: none }
}

/* ============================================================ Administración */

.admin-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}

.stat-card { padding: 20px 22px }
.stat-card span { display: block; color: var(--muted); font-size: 13px }

.stat-card strong {
    display: block; font: 700 30px 'Space Grotesk', system-ui, sans-serif; margin-top: 9px;
}

.stat-card.attention { border-color: var(--amber); background: var(--amber-soft) }
.stat-card.attention strong { color: var(--amber) }

.tab-bar { display: flex; gap: 6px; margin-bottom: 18px }

.tab {
    background: none; border: 0; border-radius: 7px; padding: 9px 15px;
    font: 600 13px 'DM Sans', system-ui, sans-serif; color: var(--muted); cursor: pointer;
}

.tab.selected { background: var(--blue-soft); color: var(--blue) }
.tab:hover { color: var(--ink) }

.admin-panel { padding: 0 22px 20px }
.admin-panel .section-toolbar { padding: 22px 0 }
.admin-row.folder-row { gap: 10px }
.admin-list { border-top: 1px solid var(--line) }

.admin-row {
    display: flex; gap: 14px; align-items: center; padding: 15px 0;
    border-bottom: 1px solid #eef1f4; font-size: 14px;
}

.admin-row .muted:last-child { margin-left: auto }

.user-table, .audit-table { border-top: 1px solid var(--line) }

.user-head, .user-row {
    display: grid; grid-template-columns: minmax(200px, 2fr) 120px minmax(240px, 1.5fr) 100px 120px;
    gap: 14px; align-items: center; padding: 13px 0;
}

.user-head, .audit-head {
    color: #8b96a1; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; border-bottom: 1px solid var(--line);
}

.user-row { border-bottom: 1px solid #eef1f4; font-size: 13px }
.user-row strong { display: block; color: var(--ink) }
.user-row small { display: block; color: #9aa4ad; font-size: 11px; margin-top: 2px }

.role-picker { display: flex; gap: 6px; flex-wrap: wrap }

.role-chip {
    display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line);
    border-radius: 14px; padding: 3px 10px; font-size: 11px; color: var(--muted); cursor: pointer;
}

.role-chip.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); font-weight: 600 }

.status-active { color: var(--green); font-weight: 600; font-size: 12px }
.status-pending { color: var(--amber); font-weight: 600; font-size: 12px }

.audit-head, .audit-row {
    display: grid; grid-template-columns: 140px 150px minmax(140px, 1fr) minmax(200px, 2fr);
    gap: 14px; align-items: center; padding: 11px 0;
}

.audit-row { border-bottom: 1px solid #eef1f4; font-size: 12px }

.audit-action {
    display: inline-block; border-radius: 10px; padding: 2px 9px;
    font-size: 11px; font-weight: 600; background: #eef1f4; color: #697481;
}

.audit-action.created { background: var(--green-soft); color: var(--green) }
.audit-action.changed { background: var(--blue-soft); color: var(--blue) }
.audit-action.read { background: #eef1f4; color: #697481 }
.audit-action.removed { background: var(--amber-soft); color: var(--amber) }
.audit-action.denied { background: var(--red-soft); color: var(--red) }

/* ============================================================ Páginas de cuenta
   Las pantallas de ASP.NET Core Identity vienen maquetadas con clases de Bootstrap.
   El proyecto no incluye Bootstrap, así que aquí se define el subconjunto que usan.
   ============================================================ */

.row { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px }
.col-lg-3, .col-lg-4, .col-lg-6, .col-lg-9,
.col-md-4, .col-md-6, .col-md-12, .col-xl-6 { flex: 1 1 320px; min-width: 0 }
.col-md-12 { flex-basis: 100% }
.col-lg-offset-2 { margin-left: 0 }

.d-flex { display: flex }
.flex-column { flex-direction: column }
.mx-auto { margin-left: auto; margin-right: auto }
.mt-2 { margin-top: 8px }
.mb-3 { margin-bottom: 16px }
.w-100 { width: 100% }
.h-100 { height: 100% }
.font-weight-bold { font-weight: 700 }

.text-danger { color: var(--red); font-size: 13px }
.text-success { color: var(--green) }
.text-info { color: var(--blue) }
.text-secondary { color: var(--muted) }

.form-label, .control-label { font-size: 12px; font-weight: 600; color: var(--muted) }

/* Las páginas de cuenta traen el marcado de Identity y no usan .page-heading: su
   h1 cuelga directamente de .content, al contrario que el resto de la aplicación. */
.content > h1 { margin-bottom: 10px }
.content > h2 { margin: 22px 0 10px }
.content > hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0 }

.form-control {
    border: 1px solid #d4dce4; background: #fff; border-radius: 7px; padding: 0 12px;
    min-height: var(--tap); font: var(--t-body) 'DM Sans', system-ui, sans-serif;
    color: var(--ink); width: 100%;
}

/* Un textarea con altura mínima y sin relleno vertical se lee fatal. */
textarea.form-control { padding: 11px 12px; min-height: 96px; line-height: 1.5 }

.form-control:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue) }

/* Bootstrap coloca la etiqueta después del campo y la flota por encima con posicionamiento.
   Aquí se reordena con grid, que da el mismo resultado sin depender de la librería. */
.form-floating { display: grid; gap: 6px }
.form-floating > label { order: 1; font-size: 12px; font-weight: 600; color: var(--muted) }
.form-floating > input,
.form-floating > select,
.form-floating > textarea { order: 2 }
.form-floating > .validation-message { order: 3 }

.checkbox { display: flex; align-items: center; font-size: var(--t-body) }

.checkbox label {
    display: flex; align-items: center; gap: 10px; min-height: var(--tap);
    padding: 0 10px; margin-left: -10px; border-radius: 9px; cursor: pointer;
}

.checkbox label:hover { background: #f4f7fa }
.form-check-input { width: 20px; height: 20px; accent-color: var(--blue); flex-shrink: 0 }
.darker-border-checkbox { border: 1px solid #98a4b0 }

.input-group { display: flex; align-items: stretch }
.input-group .form-control { border-radius: 7px 0 0 7px }

.input-group-text {
    display: flex; align-items: center; padding: 0 12px; background: #eef1f4;
    border: 1px solid #d4dce4; border-left: 0; border-radius: 0 7px 7px 0;
    font-size: var(--t-body);
}

/* Mismas medidas que .button: las páginas de cuenta traen el marcado de Identity
   con clases de Bootstrap, pero se pulsan igual que el resto de la aplicación. */
.btn {
    border: 0; border-radius: 8px; padding: 0 16px; min-height: var(--tap);
    cursor: pointer; text-decoration: none;
    font: 600 var(--t-body) 'DM Sans', system-ui, sans-serif;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

.btn-primary { background: var(--blue); color: #fff }
.btn-secondary { background: #eef1f4; color: var(--ink) }
.btn-danger { background: var(--red); color: #fff }
.btn-lg { min-height: 50px; padding: 0 20px; font-size: 14px }
.btn-link { background: none; color: var(--blue); text-decoration: underline }
.btn:disabled { opacity: .5; cursor: not-allowed }

.nav { display: flex; gap: 6px; list-style: none; margin: 0 0 20px; padding: 0 }
.nav-pills { flex-wrap: wrap }
.nav-item { list-style: none }

.nav-pills .nav-link {
    display: inline-flex; align-items: center; padding: 0 15px; min-height: var(--tap);
    border-radius: 8px; text-decoration: none;
    color: var(--muted); font: 600 var(--t-body) 'DM Sans', system-ui, sans-serif;
}

.nav-pills .nav-link:hover { background: #eef1f4; color: var(--ink) }
.nav-pills .nav-link.active { background: var(--blue-soft); color: var(--blue) }

.table { width: 100%; border-collapse: collapse; font-size: var(--t-body) }
.table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line) }
.table th { color: #8b96a1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em }

.list { list-style: none; padding: 0 }
.recovery-code { font-family: ui-monospace, monospace; font-size: 13px; padding: 4px 0 }
.glyphicon { font-style: normal }

/* El árbol es un panel fijo en el escritorio; el interruptor y el velo del cajón
   solo aparecen cuando la pantalla obliga a esconderlo. Lo mismo con la hoja de la
   ficha, que en el escritorio es la tercera columna. */
.tree-toggle, .tree-veil, .preview-sheet { display: none }

/* ============================================================ Adaptación a pantallas pequeñas */

/* La ficha es lo primero que se sacrifica: por debajo de este ancho comprimiría el
   listado, que es el contenido. Pasa a hoja inferior, igual que en el móvil. */
@media (max-width: 1240px) {
    .workspace-grid { grid-template-columns: 250px minmax(0, 1fr) }
    .workspace-grid > .preview { display: none }
    .preview-sheet { display: block }
}

@media (max-width: 1100px) {
    .admin-cards { grid-template-columns: repeat(2, 1fr) }
    .user-head, .user-row { grid-template-columns: minmax(180px, 2fr) minmax(200px, 1.5fr) 100px 110px }
    .user-head span:nth-child(2), .user-row > span:first-of-type { display: none }
}

@media (max-width: 900px) {
    .content { padding: 16px 16px 44px }
    .workspace-grid { grid-template-columns: 1fr }

    /* Se esconde la descripción, que es lo que menos ayuda a localizar un archivo. */
    .table-head, .file-row { grid-template-columns: minmax(190px, 2.4fr) 124px 56px }
    .table-head.with-location, .file-row.with-location {
        grid-template-columns: minmax(130px, 1fr) minmax(170px, 2fr) 118px 56px;
    }
    .desc-cell, .table-head .desc-head { display: none }

    /* El árbol pasa a ser un cajón: antes era una caja de 260 px con su propio
       desplazamiento encima del listado, que robaba un tercio de la pantalla
       para algo que se usa un momento y se abandona. */
    .tree-toggle { display: inline-flex }

    .tree-panel {
        position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(310px, 86vw);
        border-radius: 0; border-width: 0 1px 0 0; overflow-y: auto;
        box-shadow: 0 0 40px rgba(16, 25, 35, .3); padding: 12px 10px;
        transform: translateX(-102%); transition: transform .18s ease; height: auto;
    }

    .tree-panel.open { transform: none }
    .tree-veil { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(16, 25, 35, .45); border: 0 }
    .version-row { grid-template-columns: 45px minmax(0, 1fr) 80px 92px }
    .version-row > span:nth-of-type(3), .version-row > span:nth-of-type(4) { display: none }
    .audit-head, .audit-row { grid-template-columns: 110px 130px 1fr }
    .audit-head span:last-child, .audit-row > span:last-child { display: none }
}

@media (max-width: 640px) {
    /* En el móvil, más de la mitad de la pantalla se iba en cromo antes del primer
       archivo: 450 px de 844. Casi todo eran bloques que no cabían de ancho y se
       partían en dos líneas. Aquí se compacta cada uno a una sola fila. */

    /* En la cabecera las secciones se quedan en su icono y el correo desaparece:
       con tres secciones y la cuenta no caben tres palabras completas en 390 px. */
    .topnav { height: 52px; padding: 0 6px; gap: 4px }
    .brand-name { display: none }
    .sections .section-link { padding: 0; min-width: var(--tap); justify-content: center; font-size: 17px }
    .sections .section-link .label { display: none }
    .sections .section-link.active::after { left: 10px; right: 10px; bottom: 5px }
    .user-chip { display: none }
    .logout-button { padding: 0 8px; font-size: 12px }

    .mobile-title { display: none }
    .content { padding: 12px 12px 40px }
    :root { --t-title: 22px }

    /* La barra se aprieta en una fila: buscador que encoge, filtros y acciones en su
       icono. Los chips pasan a una tira que se desliza en horizontal, debajo. */
    .toolbar { gap: 6px; margin-bottom: 8px }
    .toolbar-spacer { display: none }
    .search-box { flex: 1 1 0; min-width: 0; max-width: none }
    .filter-button { min-width: var(--tap); padding: 0; justify-content: center; font-size: 15px }
    .filter-button .label { display: none }

    .toolbar .chips {
        order: 5; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto;
        margin: 8px -12px 0; padding: 0 12px 3px;
    }

    .toolbar .chips .divider { display: none }
    .head-actions { gap: 2px; flex-wrap: nowrap }

    /* Los botones se quedan en su icono: la etiqueta la da el atributo title. */
    .head-actions .label { display: none }
    .head-actions .button { min-width: var(--tap); padding: 0 }

    /* Las migas se quedan pegadas arriba: al desplazar, la carpeta no se pierde. */
    .crumb-bar {
        position: sticky; top: 0; z-index: 30; margin: 0 -12px 10px;
        padding: 6px 12px 8px; background: var(--canvas);
        border-bottom: 1px solid var(--line);
    }

    .crumbs { flex-wrap: nowrap; overflow: hidden }
    .crumbs .crumb, .crumbs .sep { display: none }

    .crumbs .current {
        font-size: var(--t-row); font-weight: 700; padding: 3px 4px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .crumbs .up { border: 0; margin-right: 2px; padding: 3px 4px; flex-shrink: 0 }
    .crumbs .up .label { display: none }
    .workspace-grid { display: block }
    .table-head { display: none }
    .file-row, .file-row.with-location { grid-template-columns: minmax(0, 1fr) var(--tap); padding: 0 6px 0 12px }
    .file-row { min-height: 68px }
    .file-row > span, .path-cell, .desc-cell { display: none }

    /* La ficha no cabe al lado: sube desde abajo al marcar una fila. */
    .preview-sheet {
        position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--surface);
        border-radius: 16px 16px 0 0; box-shadow: 0 -10px 34px rgba(16, 25, 35, .24);
        padding: 8px 14px 18px; max-height: 76vh; overflow-y: auto;
    }

    .preview-sheet .preview-thumb { aspect-ratio: 16 / 10 }
    .preview-grip { width: 38px; height: 4px; border-radius: 2px; background: #d3dae1; margin: 4px auto 12px }
    .viewer-nav { display: none }
    /* El recuento y el orden caben en una línea si el desplegable puede encogerse. */
    .section-toolbar { padding: 6px 12px; flex-wrap: nowrap; min-height: 48px }
    .section-toolbar .muted { display: none }
    .section-toolbar > div { white-space: nowrap }
    .section-toolbar select { min-width: 0; flex-shrink: 1 }

    /* El menú de fila se convierte en hoja inferior: al alcance del pulgar y sin
       tener que apuntar a un desplegable anclado a un botón pequeño. */
    .row-menu {
        position: fixed; inset: auto 0 0 0; top: auto; width: auto;
        border-radius: 16px 16px 0 0; padding: 8px 8px 20px;
        box-shadow: 0 -10px 34px rgba(16, 25, 35, .22); border-width: 1px 0 0;
    }

    .row-menu button, .row-menu a { min-height: 52px; font-size: var(--t-row) }
    .row-menu .ico { width: 19px; height: 19px }
    .row-menu-veil { background: rgba(16, 25, 35, .45) }

    .row-menu-title {
        display: flex; align-items: center; gap: 11px; padding: 6px 12px 10px;
        border-bottom: 1px solid var(--line); margin-bottom: 6px;
    }

    .row-menu-title strong {
        font-size: var(--t-row); min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .filter-panel { display: block }
    .filter-panel label { margin-bottom: 10px }
    .filter-panel input, .filter-panel select { width: 100% }
    .admin-cards { grid-template-columns: 1fr }
    .admin-row .muted { display: none }
    .user-head { display: none }
    .user-row { grid-template-columns: 1fr; gap: 8px }
    .audit-head { display: none }
    .audit-row { grid-template-columns: 1fr; gap: 4px }
    .pager { flex-direction: column; gap: 10px }
    .modal-backdrop { padding: 10px }
    .modal-body { padding: 16px }
    .modal-foot { padding: 12px 16px; flex-direction: column-reverse }
    .modal-foot .button { width: 100% }
    .detail-grid { grid-template-columns: 96px 1fr }
    .version-row { grid-template-columns: 42px minmax(0, 1fr) 92px }
    .version-row > span:nth-of-type(2) { display: none }
    .btn { width: 100% }
    .nav-pills { gap: 4px }
}