/* ==========================================================================
   Utilidades globales compartidas por todos los hosts del sistema
   (appWebAdmin / appWebClient / appWebMaster).

   Se cargan con una sola linea en el index.html de cada app:
   <link rel="stylesheet" href="_content/sharedComponents/css/ted-utilities.css" />

   Motivo: las utilidades equivalentes de Bootstrap (text-truncate,
   font-weight-bold, etc.) NO estan disponibles en las apps porque el
   stylesheet de Bootstrap esta deshabilitado a proposito en index.html
   ("Al habilitar los estilos de bootstrap se alteran todos los estilos
   del proyecto"). Aqui se declaran solo las que el proyecto necesita.
   ========================================================================== */

/* ==========================================================================
   Contrato de layout movil
   --------------------------------------------------------------------------
   Altura de la barra de navegacion inferior (MobileBottomNav). La consumen la
   propia barra y la reserva de scroll del contenido principal (MainLayout),
   de forma que ambas se mantengan sincronizadas.
   ========================================================================== */
:root {
    --ted-mobile-dock-height: 58px;
}

/* Texto en una sola linea con elipsis.
   El elemento debe tener un ancho acotado (columna, celda, etc.).
   Dentro de un item flex/grid el padre necesita min-width: 0,
   de lo contrario el item no encoge y no aparece la elipsis. */
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Permite que un item flex/grid encoja por debajo del tamano de su contenido.
   Requisito habitual para que .text-truncate funcione en columnas flexibles. */
.ted-min-w-0 {
    min-width: 0 !important;
}

/* Compatibilidad: el repo ya usa esta clase (venía de Bootstrap y no estaba disponible).
   Es el mismo efecto que .ted-min-w-0 y es lo que evita que un texto largo ensanche la fila. */
.min-width-0 {
    min-width: 0 !important;
}

/* ==========================================================================
   Contencion del layout
   --------------------------------------------------------------------------
   .mud-main-content es un flex item de .mud-height-full. Como todo flex item
   tiene min-width: auto, su tamano minimo es el contenido de la pagina
   (min-content). Con un texto largo sin puntos de corte (nombre de servicio,
   categoria, un chip) ese minimo supera el ancho de la pantalla y TODO el
   layout se ensancha: la vista se "expande" hacia la derecha y el contenido
   queda cortado, aunque la pagina o el componente tengan su propio
   overflow/min-width.
   Medido en la app real (viewport 423px) con un nombre de servicio de 82
   caracteres: 423 -> 785px de ancho. Con esta regla vuelve a 423px.
   ========================================================================== */
.mud-main-content {
    min-width: 0 !important;
}