/**
 * miniSYS-HGP — Tipografía de iOS (San Francisco) en todo el proyecto.
 *
 * Pedido: la letra no debe verse gruesa. En Apple la UI es Regular (cuerpo)
 * y Semibold (títulos), no Heavy/Black (800).
 *
 * Familia: `system-ui` / `-apple-system` / `BlinkMacSystemFont` es San
 * Francisco en iPhone, iPad y Mac. Apple no permite embeber SF Pro; en
 * Windows/Linux cae a Segoe / Helvetica / Arial, mismo peso liviano.
 *
 * Iconos Font Awesome (i.fas, peso 900) no se tocan: si no, desaparecen.
 * Safari: familia sólida antes de var(); smoothing antialiased + grayscale.
 */

html,
body,
body.lg-page,
body.pwd-page {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-family: var(--ms-font, system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif) !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Los controles no heredan la fuente en todos los motores (UA stylesheet). */
input,
select,
textarea,
button,
.btn,
a.btn,
optgroup {
    font-family: inherit !important;
}

/* Títulos: Semibold iOS (600), nunca 800. */
h1,
h2,
h3,
h4,
h5,
h6,
th,
strong,
b,
[class*="-title"],
[class*="-heading"],
.sidebar-brand,
.nav-item span,
.pwd-form-head h1,
.lg-page h1,
.lg-page h2 {
    font-weight: 600 !important;
}

/* Botones: Medium (500), no Bold. El recuadro sigue al texto (58.3). */
button:not(.cp-kpi):not([class*="-kpi"]):not(.minisys-toast__close):not(.ms-nav-drop-btn),
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
.btn,
[class*="-btn"]:not(.minisys-toast__close),
[class^="btn-"],
.ms-sidebar-tool,
.minisys-confirm-btn {
    font-weight: 500 !important;
}

/* KPI: el número es semibold, no negro. */
[class*="-kpi"] strong,
.cp-kpi strong {
    font-weight: 600 !important;
}

/*
 * 58.18 — Layout tipo app: el content-wrapper llena el chrome y NO scrollea
 * la página. Cada vista tiene cabecera fija y el listado scrollea por dentro.
 * 58.16 soltaba overflow/height:auto aquí (hueco, botones al pie, tortas que
 * viajan con el historial, planillas a 1e6 px). Carnet no se toca.
 *
 * Tablas: no se pisa table-layout ni anchos de columna del módulo.
 * Las celdas wrapean (el nowrap de [class*="-tab"] en paneles se hereda);
 * Acciones sigue en una fila.
 */
html.ms-nav-top .content-wrapper table {
    width: 100%;
    max-width: 100%;
}

html.ms-nav-top .content-wrapper table td {
    white-space: normal;
    overflow-wrap: break-word;
    overflow: hidden;
}

/* Acciones: nowrap para los iconos en una fila. NO width:1% — con
 * table-layout:fixed (shell escritorio) 1% aplasta la columna y el
 * encabezado se lee «ACCIONI» / el texto de al lado se pinta encima. */
html.ms-nav-top .content-wrapper table td[data-label="Acciones"],
html.ms-nav-top .content-wrapper table td[data-label="Acción"] {
    white-space: nowrap;
    overflow: visible;
    overflow-wrap: normal;
}

html.ms-nav-top .content-wrapper table .prod-actions,
html.ms-nav-top .content-wrapper table .func-actions-row,
html.ms-nav-top .content-wrapper table .pc-actions,
html.ms-nav-top .content-wrapper table .usr-actions {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: flex-end;
    width: auto;
    max-width: none;
}

/*
 * 58.19 — Listas en recuadro: el wrap llena el wrapper (scrollea el cuadro).
 * El resto de vistas crece con el contenido y scrollea el documento.
 * min-height: calc(100dvh) dejaba un hueco gordo.
 */
html.ms-nav-top body.ms-box-list .content-wrapper > [class$="-wrap"],
html.ms-nav-top body.ms-box-list .content-wrapper > [class$="-wrapper"] {
    min-height: 0;
    height: 100%;
    max-height: 100%;
}

/* Módulos con overflow:hidden !important (cargan después del bundle):
 * en vistas que NO son recuadro, type.css se recarga al pie y suelta el scroll. */
html.ms-nav-top body.ms-nav-top:not(.ms-box-list):not(.ms-carnet-page) .main-content,
html.ms-nav-top body.ms-nav-top:not(.ms-box-list):not(.ms-carnet-page) .content-wrapper {
    overflow: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: none !important;
}

html.ms-nav-top body.ms-nav-top:not(.ms-box-list):not(.ms-carnet-page) .content-wrapper > [class$="-wrap"],
html.ms-nav-top body.ms-nav-top:not(.ms-box-list):not(.ms-carnet-page) .content-wrapper > [class$="-wrapper"] {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

/*
 * Control vehicular: cromo (barra navy + bandejas) fijo.
 * html/body recortan el viewport (58.61). El scroller es .content-wrapper
 * (Safari: overflow auto, no solo overflow-y; overflow-x hidden/clip).
 * Escritorio: cabecera y buscador fijos; .cv-stage baja por dentro.
 * Móvil: un solo scroller (el wrapper) para no quedar preso.
 * Esta hoja se recarga al pie y gana a :not(.ms-box-list) height:auto.
 */
html.ms-nav-top.ms-cv-page,
html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page {
    overflow: hidden !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: var(--ms-app-height, 100dvh) !important;
    max-height: 100% !important;
    max-height: var(--ms-app-height, 100dvh) !important;
}
html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page .ms-app-shell,
html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page.ms-app-full .main-content {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
}
html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page.ms-app-full .content-wrapper {
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-x: clip;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page .content-wrapper > .cv-wrap {
    min-height: 0 !important;
    min-width: 0 !important;
}

@media (min-width: 901px) {
    html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page.ms-app-full .content-wrapper {
        overflow: hidden !important;
        overflow-x: hidden !important;
        height: 100% !important;
        max-height: 100% !important;
    }
    html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page .content-wrapper > .cv-wrap {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

@media (max-width: 900px) {
    html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page.ms-app-full .content-wrapper {
        overflow: auto !important;
        overflow-x: hidden !important;
        overflow-x: clip;
        height: auto !important;
        max-height: none !important;
    }
    html.ms-nav-top.ms-cv-page body.ms-nav-top.ms-cv-page .content-wrapper > .cv-wrap {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto;
    }
    /* btn-square al pie pone min-height:0; acá el toque de Consultar es 44 px. */
    body.ms-cv-page .content-wrapper .cv-btn {
        min-height: 44px !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 10px 16px !important;
    }
    body.ms-cv-page .content-wrapper .cv-search-row input {
        min-height: 44px !important;
        font-size: 16px !important;
    }
}

/*
 * 58.34 — Gestión documental (sysinfofiles.php).
 * La regla genérica :not(.ms-box-list) (5 clases) pone height:auto y
 * overflow-x:hidden (eso computa overflow-y:auto). El main-content es
 * flex en fila, el wrap crece y overscroll-behavior:contain se come la
 * rueda. Aquí gana en especificidad: columna + scroller acotado.
 */
html.ms-nav-top.ms-doc-page,
html.ms-nav-top.ms-doc-page body.ms-nav-top.ms-doc-page {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
}
html.ms-nav-top.ms-doc-page body.ms-nav-top.ms-doc-page .ms-app-shell,
html.ms-nav-top.ms-doc-page body.ms-nav-top.ms-doc-page.ms-app-full .main-content {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
}
html.ms-nav-top.ms-doc-page body.ms-nav-top.ms-doc-page.ms-app-full .content-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
html.ms-nav-top.ms-doc-page body.ms-nav-top.ms-doc-page.ms-app-full .content-wrapper > .doc-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: 0 0 auto;
}

/*
 * Gestión de usuarios (sysusrint.php). Cromo (barra navy + bandejas) fijo.
 * html/body recortan el viewport (58.61 / ms-box-list). El scroller es
 * .content-wrapper: título, resumen, filtros y tablas bajan juntos.
 * Sin scroll horizontal. Safari: 100vh luego 100dvh / --ms-app-height;
 * overflow:auto (no solo overflow-y). Esta hoja se recarga al pie y gana
 * a overflow:hidden !important del módulo y de minisys-app-mobile.
 */
html.ms-nav-top.ms-usr-page,
html.ms-nav-top.ms-usr-page body.ms-nav-top.ms-usr-page,
html.ms-nav-top.ms-box-list.ms-usr-page,
html.ms-nav-top.ms-box-list.ms-usr-page body.ms-nav-top.ms-box-list.ms-usr-page {
    overflow: hidden !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: var(--ms-app-height, 100dvh) !important;
    max-height: 100% !important;
    max-height: var(--ms-app-height, 100dvh) !important;
}
html.ms-nav-top.ms-usr-page body.ms-nav-top.ms-usr-page .ms-app-shell,
html.ms-nav-top.ms-usr-page body.ms-nav-top.ms-usr-page.ms-app-full .main-content,
html.ms-nav-top.ms-box-list.ms-usr-page body.ms-nav-top.ms-box-list.ms-usr-page .ms-app-shell,
html.ms-nav-top.ms-box-list.ms-usr-page body.ms-nav-top.ms-box-list.ms-usr-page .main-content {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
}
html.ms-nav-top.ms-usr-page body.ms-nav-top.ms-usr-page.ms-app-full .content-wrapper,
html.ms-nav-top.ms-box-list.ms-usr-page body.ms-nav-top.ms-box-list.ms-usr-page .content-wrapper {
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-x: clip;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
html.ms-nav-top.ms-usr-page body.ms-nav-top.ms-usr-page .content-wrapper > .usr-wrap,
html.ms-nav-top.ms-box-list.ms-usr-page body.ms-nav-top.ms-box-list.ms-usr-page .content-wrapper > .usr-wrap {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: 0 0 auto;
}
html.ms-nav-top.ms-usr-page .content-wrapper .usr-sections,
html.ms-nav-top.ms-usr-page .content-wrapper .usr-section,
html.ms-nav-top.ms-usr-page .content-wrapper .usr-table-container {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* 58.20 — Inventario interno: Devolver/Detalles a todo el ancho de la tarjeta.
 * minisys-btn-square.css pone width:max-content; type.css se recarga al pie. */
.content-wrapper .ii-wrap .ia-card-actions .pc-btn {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
}

/* Pestañas de vista y KPIs: no pastillas de 30 px superpuestas.
 * minisys-btn-square.css (al pie) pisa width/flex de casi todo button.
 * 58.38: .far-tab (Registrar / Recientes de farmacia) entra al mismo
 * tratamiento: dos columnas a 100 %, no max-content.
 * 58.83: .fsta-tab (Historial / Bovinas / Cintas) igual: tres columnas. */
.content-wrapper .sgh-tab,
.content-wrapper .prod-nav-item,
.content-wrapper .tkt-tab,
.content-wrapper .ca-tab,
.content-wrapper .far-tab,
.content-wrapper .fsta-tab {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 6.5rem !important;
    max-width: none !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 12px !important;
    overflow: visible !important;
}

/* 58.21 — Pestañas de tickets compactas: type.css se recarga al pie y
 * ganaría a sysoptkt.css si no se exceptúa aquí. */
body.ms-tkt-list .content-wrapper .tkt-chrome .tkt-tab {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 5px 8px !important;
}

/*
 * 58.69 — Control de acceso: chips de vista (Registros / Nuevo / Admins /
 * Reportes) abrazan icono+texto. El bloque anterior (flex:1 + min-width
 * 6.5rem) los estiraba a todo el renglón o los dejaba como cajas; esta
 * hoja se recarga al pie y tiene que ceder al CSS del módulo.
 * Escritorio: alto al contenido. Móvil: ≥44 px, sin estirar a 100 %.
 */
body.ms-ca-page .content-wrapper .ca-tabs .ca-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 6px 12px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    body.ms-ca-page .content-wrapper .ca-tabs .ca-tab {
        min-height: 44px !important;
        padding: 10px 14px !important;
        white-space: nowrap !important;
    }
}

.content-wrapper .usr-summary-item {
    display: flex !important;
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 5.5rem !important;
    max-width: none !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 8px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 0.78rem !important;
}

.content-wrapper .usr-summary-item .usr-summary-num,
.content-wrapper .usr-summary-item strong {
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
}

.content-wrapper .usr-summary-item .usr-summary-label {
    display: block !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    white-space: normal !important;
}

.content-wrapper .usr-chip {
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}

/*
 * 58.26 — Esta hoja se recarga al pie y ganaba a sysoptkt.css / sysactfc.css.
 * En móvil, min-width: 6.5rem + nowrap hacía superponer «En proceso» con
 * Pendientes/Cerrados, y las 5 pestañas de productividad se amontonaban.
 * Grid de tres columnas, texto que envuelve, alto auto, inputs táctiles 44px.
 */
@media (max-width: 900px) {
    body.ms-tkt-list .content-wrapper .tkt-chrome .tkt-tab,
    body.ms-tkt-list .content-wrapper .tkt-tab {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 52px !important;
        height: auto !important;
        max-height: none !important;
        padding: 6px 4px !important;
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.15 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
    }

    body.ms-tkt-list .content-wrapper .tkt-chrome .tkt-tab i {
        display: inline-block !important;
        font-size: 0.85rem !important;
    }

    body.ms-actfc-page .content-wrapper .prod-nav-tabs--top {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 6px !important;
    }

    body.ms-actfc-page .content-wrapper .prod-nav-item {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 8px 6px !important;
        white-space: normal !important;
        overflow: visible !important;
        justify-content: center !important;
    }

    /*
     * 58.38 — Salida de insumos (/sysfar&std/sysfaroutins.php).
     * 58.83 — Historial de estadísticas (/sysfar&std/sysfarstdout.php):
     * mismo recorte html/body; el scroller es content-wrapper. Si no,
     * overflow:hidden del módulo deja el celular sin desplazamiento y
     * las pestañas (max-content) se montan («Historial» sobre «Bovinas»).
     * html/body.ms-box-list recortan el viewport (overflow:hidden).
     * Safari: 100vh luego 100dvh / --ms-app-height; overflow-x luego
     * overflow-y; no solo dvh.
     */
    html.ms-nav-top.ms-far-page,
    html.ms-nav-top.ms-far-page body.ms-nav-top.ms-far-page,
    html.ms-nav-top.ms-box-list.ms-far-page,
    html.ms-nav-top.ms-box-list.ms-far-page body.ms-nav-top.ms-box-list.ms-far-page,
    html.ms-nav-top.ms-fsta-page,
    html.ms-nav-top.ms-fsta-page body.ms-nav-top.ms-fsta-page,
    html.ms-nav-top.ms-box-list.ms-fsta-page,
    html.ms-nav-top.ms-box-list.ms-fsta-page body.ms-nav-top.ms-box-list.ms-fsta-page {
        overflow: hidden !important;
        height: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        height: var(--ms-app-height, 100dvh) !important;
        max-height: 100% !important;
        max-height: var(--ms-app-height, 100dvh) !important;
    }
    html.ms-nav-top.ms-far-page body.ms-nav-top.ms-far-page .ms-app-shell,
    html.ms-nav-top.ms-far-page body.ms-nav-top.ms-far-page.ms-app-full .main-content,
    html.ms-nav-top.ms-box-list.ms-far-page body.ms-nav-top.ms-box-list.ms-far-page .ms-app-shell,
    html.ms-nav-top.ms-box-list.ms-far-page body.ms-nav-top.ms-box-list.ms-far-page .main-content,
    html.ms-nav-top.ms-fsta-page body.ms-nav-top.ms-fsta-page .ms-app-shell,
    html.ms-nav-top.ms-fsta-page body.ms-nav-top.ms-fsta-page.ms-app-full .main-content,
    html.ms-nav-top.ms-box-list.ms-fsta-page body.ms-nav-top.ms-box-list.ms-fsta-page .ms-app-shell,
    html.ms-nav-top.ms-box-list.ms-fsta-page body.ms-nav-top.ms-box-list.ms-fsta-page .main-content {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
    }
    html.ms-nav-top.ms-far-page body.ms-nav-top.ms-far-page.ms-app-full .content-wrapper,
    html.ms-nav-top.ms-box-list.ms-far-page body.ms-nav-top.ms-box-list.ms-far-page .content-wrapper,
    html.ms-nav-top.ms-fsta-page body.ms-nav-top.ms-fsta-page.ms-app-full .content-wrapper,
    html.ms-nav-top.ms-box-list.ms-fsta-page body.ms-nav-top.ms-box-list.ms-fsta-page .content-wrapper {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }
    html.ms-nav-top.ms-far-page body.ms-nav-top.ms-far-page .content-wrapper > .far-wrap,
    html.ms-nav-top.ms-box-list.ms-far-page body.ms-nav-top.ms-box-list.ms-far-page .content-wrapper > .far-wrap,
    html.ms-nav-top.ms-fsta-page body.ms-nav-top.ms-fsta-page .content-wrapper > .fsta-wrap,
    html.ms-nav-top.ms-box-list.ms-fsta-page body.ms-nav-top.ms-box-list.ms-fsta-page .content-wrapper > .fsta-wrap {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex: 0 0 auto;
    }

    /* Registrar / Recientes: dos pistas iguales, 44 px, sin montarse. */
    body.ms-far-page .content-wrapper .far-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100% !important;
        max-width: 100% !important;
        gap: 6px !important;
        overflow: visible !important;
    }
    body.ms-far-page .content-wrapper .far-tab {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 8px 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        justify-content: center !important;
    }

    /* Historial / Bovinas / Cintas: tres pistas, icono arriba, 44 px. */
    body.ms-fsta-page .content-wrapper .fsta-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100% !important;
        max-width: 100% !important;
        gap: 4px !important;
        overflow: visible !important;
    }
    body.ms-fsta-page .content-wrapper .fsta-tab {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 6px 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
    }

    body.ms-fsta-page .content-wrapper .fsta-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
    }

    /* Borrar (solo autor): 44 px táctil; pisa el 36×36 de acciones de tabla. */
    body.ms-fsta-page .content-wrapper table.fsta-table td[data-label="Acciones"] button.fsta-del {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        font-size: 0 !important;
        flex: 0 0 44px !important;
        padding: 0 !important;
    }
    body.ms-fsta-page .content-wrapper table.fsta-table td[data-label="Acciones"] button.fsta-del > i {
        font-size: 0.95rem !important;
    }

    /*
     * 58.86 — Inicio: Personalizar / Contraseña / Recargar / Salir en
     * grilla 2×2, 44 px, mismo estilo. Esta hoja va al pie y gana al
     * flex + max-content de btn-square (Recargar era <a> a 100 % y
     * los botones quedaban pastillas sueltas).
     */
    body.ms-hub-page .content-wrapper .hub-toolbar-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        flex: none !important;
    }
    body.ms-hub-page .content-wrapper .hub-toolbar-actions form {
        display: contents !important;
    }
    body.ms-hub-page .content-wrapper .hub-btn,
    body.ms-hub-page .content-wrapper .hub-toolbar-actions .hub-btn,
    body.ms-hub-page .content-wrapper .hub-toolbar-actions a.hub-btn,
    body.ms-hub-page .content-wrapper .hub-toolbar-actions button.hub-btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: auto !important;
        flex: none !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 10px 8px !important;
        font-size: 0.82rem !important;
    }
}