@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* ==========================================================================
   TOKENS — los valores que se tocan para cambios esteticos
   --------------------------------------------------------------------------
   Todo lo estetico que se ajusta seguido vive aca. Para cambiar el aspecto de
   algo, cambiar el valor de la variable en este bloque; no hace falta buscar
   la regla mas abajo ni tocar los templates.

   Contenido del archivo, en orden:
     1. Tokens (este bloque)
     2. Base (tipografia, body, links)
     3. Layout (wrapper, sidebar, main)
     4. Titulo de pagina
     5. Componentes varios heredados
     6. Template V2 (barra superior)
     7. Dashboard (grilla de widgets)
     8. Ficha de personal
   ========================================================================== */

:root {
    /* Color de marca. Se guarda en rgb suelto para poder usarlo con
       transparencia: rgba(var(--color-marca-rgb), 0.1) */
    --color-marca-rgb: 13, 110, 253;
    --color-marca: rgb(var(--color-marca-rgb));

    /* Fondo del area de contenido */
    --pagina-fondo: #f4f6f9;

    /* --- Titulo de cada pagina (el <h4> de arriba de todo) --- */
    --titulo-margen-arriba: 0.75rem;
    --titulo-margen-izquierda: 0.5rem;
    --titulo-padding: 0.75rem 1.15rem;
    --titulo-fondo: #fff;
    --titulo-color: #1f2d3d;
    --titulo-radio: 0.75rem;
    --titulo-acento-color: var(--color-marca);
    --titulo-acento-ancho: 4px;
    --titulo-sombra: 0 2px 8px rgba(34, 46, 60, 0.07);
    --titulo-borde: 1px solid rgba(34, 46, 60, 0.08);

    /* --- Barra superior del template V2 --- */
    --topnav-fondo: var(--bs-dark);
    --topnav-texto: rgba(233, 236, 239, 0.85);

    /* --- Widgets del dashboard --- */
    --widget-radio: 0.85rem;
    --widget-sombra: 0 2px 8px rgba(34, 46, 60, 0.08);
    --widget-separacion: 1rem;
    --widget-alto-fila: 190px;

    /* --- Ficha de personal --- */
    --ficha-radio: 0.85rem;
    --ficha-sombra: 0 2px 8px rgba(34, 46, 60, 0.08);
    --ficha-borde: 1px solid rgba(34, 46, 60, 0.08);
    --ficha-etiqueta-color: #78859b;
    --ficha-valor-color: #1f2d3d;
    --ficha-foto-tamano: 150px;

    /* Aire interno de las solapas y de cada grupo de datos. Subir estos dos
       valores es lo que despega el contenido de los bordes. */
    --ficha-padding: 1.5rem;
    --ficha-grupo-radio: 0.6rem;
    --ficha-grupo-titulo-fondo: rgba(var(--color-marca-rgb), 0.07);
    --ficha-grupo-titulo-color: #1f2d3d;
}

*,
::after,
::before {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    opacity: 1;
    overflow-y: scroll;
    margin: 0;
}

a {
    cursor: pointer;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}

li {
    list-style: none;
}

h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.275rem;
    color: var(--bs-emphasis-color);
}

/* ==========================================================================
   Titulo de pagina
   Aplica al <h4> que encabeza cada pantalla, sin tocar los ~100 templates:
   son todos `.content > .container-fluid > .mb-3 > h4`. En templates nuevos
   alcanza con poner class="page-titulo".
   Los valores salen de los tokens --titulo-* de arriba.
   ========================================================================== */

.page-titulo,
.content > .container-fluid > .mb-3 > h4 {
    align-items: center;
    background: var(--titulo-fondo);
    border: var(--titulo-borde);
    border-left: var(--titulo-acento-ancho) solid var(--titulo-acento-color);
    border-radius: var(--titulo-radio);
    box-shadow: var(--titulo-sombra);
    color: var(--titulo-color);
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0;
    margin-left: var(--titulo-margen-izquierda);
    margin-top: var(--titulo-margen-arriba);
    padding: var(--titulo-padding);
}

/* en las pantallas que ponen un boton al lado del titulo, la barra ocupa el
   resto del ancho y el boton queda a la derecha */

.content > .container-fluid > .mb-3.d-flex > h4 {
    flex: 1;
}

/* Layout for admin dashboard skeleton */

.wrapper {
    align-items: stretch;
    display: flex;
    width: 100%;
}

#sidebar {
    max-width: 264px;
    min-width: 264px;
    background: var(--bs-dark);
    transition: all 0.35s ease-in-out;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    width: 100%;
    background: var(--bs-dark-bg-subtle);
}

/* Sidebar Elements Style */

.sidebar-logo {
    padding: 1.15rem;
}

.sidebar-logo a {
    color: #e9ecef;
    font-size: 1.15rem;
    font-weight: 600;
}

.sidebar-nav {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: 0;
}

.sidebar-header {
    color: #e9ecef;
    font-size: .75rem;
    padding: 1.5rem 1.5rem .375rem;
}

a.sidebar-link {
    padding: .625rem 1.625rem;
    color: #e9ecef;
    position: relative;
    display: block;
    font-size: 0.875rem;
}

.sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}

.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

.avatar {
    height: 40px;
    width: 40px;
}

.navbar-expand .navbar-nav {
    margin-left: auto;
}

.content {
    flex: 1;
    max-width: 100vw;
    width: 100vw;
}

@media (min-width:768px) {
    .content {
        max-width: auto;
        width: auto;
    }
}

.card {
    box-shadow: 0 0 .875rem 0 rgba(34, 46, 60, .05);
    margin-bottom: 24px;
}

.illustration {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
}

.illustration-img {
    max-width: 150px;
    width: 100%;
}

/* Sidebar Toggle */

#sidebar.collapsed {
    margin-left: -264px;
}

/* Footer and Nav */

@media (max-width:767.98px) {

    .js-sidebar {
        margin-left: -264px;
    }

    #sidebar.collapsed {
        margin-left: 0;
    }

    .navbar,
    footer {
        width: 100vw;
    }
}

/* Theme Toggler */

.theme-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-65%);
    text-align: center;
    z-index: 10;
    right: 0;
    left: auto;
    border: none;
    background-color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .theme-toggle .fa-sun,
html[data-bs-theme="light"] .theme-toggle .fa-moon {
    cursor: pointer;
    padding: 10px;
    display: block;
    font-size: 1.25rem;
    color: #FFF;
}

html[data-bs-theme="dark"] .theme-toggle .fa-moon {
    display: none;
}

html[data-bs-theme="light"] .theme-toggle .fa-sun {
    display: none;
}

/* Buttons  */
h4 {
    font-size: 25px;
}

ul {
    list-style-type: circle !important;
    padding-left: 1em;
}

.sidebar-header {
    border-bottom:1px solid rgba(255, 255, 255, 0.4); 
    font-size: 15px;
    font-weight: 600;
}

.card-header{
    background-color: #fff;
}

.card-perm-header{
    background-color: yellow;
}

.card-perm-subheader {
    background-color: black; 
    color: white;
}

.stock-category-name{
    background: #89AAE6;
    color: white;
}

.stock-table th, .stock-table td {
    border-color: #89AAE6; /* Color de los bordes */
}

.table-hover tbody tr:hover {
    background-color: #F2F7FF; /* Color de fondo al pasar el ratón */
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.page-item {
    margin: 0 5px;
}

.page-link {
    color: #333;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
}

.page-link:hover {
    text-decoration: none;
    background-color: #e9ecef;
}

.page-item.active .page-link {
    z-index: 2;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

/* ==========================================================================
   Template V2: navegacion en barra superior (sin sidebar)
   Se activa con <body class="tpl-v2">, ver templates/layout/base_v2.html.twig
   ========================================================================== */

body.tpl-v2 .main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* .content usa width:100vw, que incluye el ancho de la barra de scroll y deja
   la pagina corrida en horizontal. Sin sidebar no hace falta */

body.tpl-v2 .content {
    max-width: 100%;
    width: 100%;
}

.topnav {
    background: var(--topnav-fondo);
    padding: 0.25rem 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.topnav .navbar-brand {
    align-items: center;
    color: #e9ecef;
    display: flex;
    font-size: 1.05rem;
    font-weight: 600;
    gap: 0.5rem;
}

.topnav .navbar-nav {
    gap: 0.4rem;
}

.topnav .nav-link {
    align-items: center;
    border-radius: 0.35rem;
    color: var(--topnav-texto);
    display: flex;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
}

.topnav .nav-link:hover,
.topnav .nav-link:focus,
.topnav .nav-link.show {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.topnav .nav-link.activo {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Panel desplegable: una columna por grupo del menu */

.mega-menu {
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    max-height: 70vh;
    max-width: 90vw;
    overflow-y: auto;
    padding: 1rem;
}

/* El layout en columnas se aplica solo al panel abierto: si se pusiera en
   .mega-menu a secas pisaria el display:none de bootstrap y quedarian todos
   los desplegables visibles al mismo tiempo. */

.mega-menu.show {
    align-content: flex-start;
    /* cada tarjeta con el alto de su contenido: estiradas quedan cajas vacias */
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* Ancho segun cantidad de columnas (columna de 14rem + 1.5rem de gap + padding).
   Fijo a proposito: popper necesita saber el tamano para poder correr el panel
   cuando queda contra el borde derecho de la pantalla. */

.mega-c1 {
    width: 17rem;
}

.mega-c2 {
    width: 34.5rem;
}

/* Paneles de 3 columnas o mas: se despliegan a lo ancho de la barra porque
   colgando del boton se salen de la pantalla y, dentro de un navbar, bootstrap
   desactiva popper (no aplica estilos) y nada los reacomoda. El position:static
   va solo en estas secciones: puesto en todas descoloca a las chicas. */

@media (min-width: 1200px) {
    .topnav {
        position: relative;
    }

    .topnav .nav-item-ancho {
        position: static;
    }

    .mega-ancho {
        border-radius: 0 0 0.5rem 0.5rem;
        justify-content: center;
        left: 0;
        /* si no, el max-width general lo deja corrido contra la izquierda */
        max-width: none;
        padding: 1.25rem 2rem;
        right: 0;
        width: auto;
    }
}

/* El boton queda resaltado mientras su panel esta abierto, para que se vea de
   donde salio */

.topnav .nav-link.show {
    background: #fff;
    color: rgb(var(--acento));
}

.topnav .nav-link.show i {
    color: rgb(var(--acento));
}

.mega-col {
    background: rgba(var(--acento), 0.045);
    border: 1px solid rgba(var(--acento), 0.18);
    border-radius: 0.5rem;
    border-top: 3px solid rgb(var(--acento));
    padding: 0.7rem 0.8rem 0.8rem;
    width: 15rem;
}

.mega-titulo {
    align-items: center;
    border-bottom: 1px solid rgba(var(--acento), 0.2);
    color: rgb(var(--acento));
    display: flex;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 0.35rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
    padding-bottom: 0.4rem;
    text-transform: uppercase;
}

.mega-link {
    align-items: center;
    border-radius: 0.3rem;
    color: #212529;
    display: flex;
    font-size: 0.9rem;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem;
    text-decoration: none;
}

.mega-link i {
    color: rgba(var(--acento), 0.55);
}

.mega-link:hover {
    background: rgba(var(--acento), 0.14);
    color: rgb(var(--acento));
}

.mega-link:hover i {
    color: rgb(var(--acento));
}

.mega-subgrupo {
    border-left: 2px solid rgba(var(--acento), 0.35);
    margin: 0.4rem 0 0.4rem 0.3rem;
    padding-left: 0.5rem;
}

.mega-subtitulo {
    color: rgba(var(--acento), 0.8);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0;
    text-transform: uppercase;
}

/* Mobile: bootstrap ya vuelve estatico el dropdown dentro del collapse */

@media (max-width: 1199.98px) {
    .topnav .navbar-collapse {
        max-height: 75vh;
        overflow-y: auto;
    }

    .topnav .navbar-nav {
        gap: 0;
    }

    .mega-menu {
        box-shadow: none;
        margin: 0.25rem 0 0.5rem;
        max-width: none;
        width: 100%;
    }

    /* apiladas a lo ancho, sin las columnas */
    .mega-menu.show {
        display: block;
        width: 100%;
    }

    .mega-col {
        width: auto;
    }

    .mega-col + .mega-col {
        margin-top: 0.9rem;
    }

    .mega-col + .mega-col {
        margin-top: 0.75rem;
    }
}

/* ==========================================================================
   Dashboard: grilla de widgets (3 columnas)
   Cada widget declara cuantas columnas y filas ocupa; ver App\Widget\*
   ========================================================================== */

.dashboard-grid {
    display: grid;
    gap: var(--widget-separacion);
    grid-auto-rows: var(--widget-alto-fila);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-widget[data-ancho="2"] {
    grid-column: span 2;
}

.dashboard-widget[data-ancho="3"] {
    grid-column: span 3;
}

.dashboard-widget[data-ancho="4"] {
    grid-column: span 4;
}

.dashboard-widget[data-alto="2"] {
    grid-row: span 2;
}

.dashboard-widget[data-alto="3"] {
    grid-row: span 3;
}

.widget-card {
    border: 1px solid rgba(var(--acento), 0.25);
    /* bien redondeado y recortando el contenido: es lo que hace que se lea
       como una pieza cerrada y no como un bloque suelto de la pagina */
    border-radius: var(--widget-radio);
    box-shadow: var(--widget-sombra);
    display: flex;
    flex-direction: column;
    /* .card global trae margin-bottom: 24px, que con h-100 desborda la celda */
    margin-bottom: 0;
    overflow: hidden;
}

.widget-header {
    align-items: center;
    background: rgba(var(--acento), 0.07);
    border-bottom: 1px solid rgba(var(--acento), 0.2);
    display: flex;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
}

.widget-header > i {
    color: rgb(var(--acento));
}

.widget-titulo {
    color: rgb(var(--acento));
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* el contenido del widget scrollea adentro, nunca estira la grilla */

.widget-body {
    overflow: auto;
    padding: 0.75rem;
}

/* Controles de edicion: aparecen solo al personalizar */

.widget-arrastrar,
.widget-acciones {
    display: none;
}

.widget-acciones {
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.widget-tamano {
    width: auto;
}

.dashboard-editando .widget-arrastrar {
    color: rgba(var(--acento), 0.7);
    display: inline-flex;
}

/* todo el encabezado es la zona de arrastre */

.dashboard-editando .widget-header {
    cursor: grab;
    user-select: none;
}

.dashboard-editando .widget-acciones {
    cursor: auto;
}

.ui-sortable-helper .widget-header {
    cursor: grabbing;
}

.dashboard-editando .widget-acciones {
    display: flex;
}

.dashboard-editando .widget-card {
    outline: 2px dashed rgba(var(--acento), 0.45);
    outline-offset: 2px;
}

.dashboard-editando .widget-body {
    /* en edicion importa mover las tarjetas, no operar lo que hay adentro */
    pointer-events: none;
}

.widget-placeholder {
    background: rgba(0, 0, 0, 0.04);
    border: 2px dashed rgba(0, 0, 0, 0.15);
    border-radius: var(--widget-radio);
}

/* Catalogo del modal */

.catalogo-item {
    align-items: center;
    border: 1px solid rgba(var(--acento), 0.25);
    border-left: 3px solid rgb(var(--acento));
    border-radius: 0.5rem;
    display: flex;
    gap: 0.6rem;
    height: 100%;
    padding: 0.6rem 0.75rem;
}

.catalogo-icono {
    color: rgb(var(--acento));
    font-size: 1.35rem;
}

.catalogo-titulo {
    font-weight: 600;
}

.catalogo-descripcion {
    color: #6c757d;
    font-size: 0.82rem;
}

/* Widget de cumpleanios */

.cumpleanios-dia {
    align-items: center;
    background: rgba(var(--acento), 0.1);
    border-radius: 0.45rem;
    color: rgb(var(--acento));
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    line-height: 1;
    padding: 0.3rem 0;
    width: 2.6rem;
}

.cumpleanios-dia.es-hoy {
    background: rgb(var(--acento));
    color: #fff;
}

.cumpleanios-dia-numero {
    font-size: 1.05rem;
    font-weight: 700;
}

.cumpleanios-dia-mes {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 0.15rem;
}

/* sin esto el text-truncate del nombre no achica nunca dentro del flex */

.cumpleanios-datos {
    min-width: 0;
}

/* Cada corte saca una columna: el ancho que ya no entra se recorta al maximo
   disponible, asi un widget de 4 nunca desborda la grilla. */

@media (max-width: 1399.98px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-widget[data-ancho="4"] {
        grid-column: span 3;
    }
}

@media (max-width: 991.98px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-widget[data-ancho="3"],
    .dashboard-widget[data-ancho="4"] {
        grid-column: span 2;
    }
}

@media (max-width: 575.98px) {
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-widget[data-ancho="2"],
    .dashboard-widget[data-ancho="3"],
    .dashboard-widget[data-ancho="4"] {
        grid-column: span 1;
    }
}


/* ==========================================================================
   Ficha de personal
   Pantalla /personal/detalle/{id}: cabecera con foto + solapas de datos.
   Los valores salen de los tokens --ficha-* de arriba.
   ========================================================================== */

.ficha-card {
    background: #fff;
    border: var(--ficha-borde);
    border-radius: var(--ficha-radio);
    box-shadow: var(--ficha-sombra);
}

/* --- Cabecera: foto, nombre y datos de contacto --- */

.ficha-cabecera {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem;
}

.ficha-foto {
    flex-shrink: 0;
    position: relative;
    height: var(--ficha-foto-tamano);
    width: var(--ficha-foto-tamano);
}

.ficha-foto img,
.ficha-foto .ficha-foto-iniciales {
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(34, 46, 60, 0.18);
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Avatar por defecto cuando la persona no tiene foto cargada */

.ficha-foto-iniciales {
    align-items: center;
    background: rgba(var(--color-marca-rgb), 0.12);
    color: var(--color-marca);
    display: flex;
    font-size: calc(var(--ficha-foto-tamano) / 3);
    font-weight: 600;
    justify-content: center;
    letter-spacing: 1px;
}

/* Boton camara, pegado abajo a la derecha del circulo */

.ficha-foto-acciones {
    bottom: 4px;
    position: absolute;
    right: 4px;
}

.ficha-foto-acciones .btn {
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(34, 46, 60, 0.25);
    height: 38px;
    line-height: 1;
    padding: 0;
    width: 38px;
}

.ficha-identidad {
    flex: 1 1 260px;
    min-width: 0;
}

.ficha-identidad h3 {
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.ficha-contacto {
    color: var(--ficha-etiqueta-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin-top: 0.75rem;
}

.ficha-contacto span {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.ficha-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* --- Cuerpo de la tarjeta ---
   No usamos .card-body de Bootstrap: su padding sale de --bs-card-spacer-x,
   que solo se define dentro de un .card, y aca el contenedor es .ficha-card.
   Sin esta regla el contenido queda pegado a los bordes. */

.ficha-cuerpo {
    padding: var(--ficha-padding);
}

.ficha-tabs-contenido {
    padding-top: var(--ficha-padding);
}

/* --- Grupo de datos: recuadro propio con encabezado marcado --- */

.ficha-grupo {
    background: #fff;
    border: var(--ficha-borde);
    border-radius: var(--ficha-grupo-radio);
    overflow: hidden;
}

.ficha-grupo + .ficha-grupo {
    margin-top: 1.25rem;
}

/* Encabezado del grupo: fondo tenue de marca + barra de acento a la izquierda,
   para que se lea como el titulo del bloque y no como un texto suelto. */

.ficha-grupo-titulo {
    align-items: center;
    background: var(--ficha-grupo-titulo-fondo);
    border-bottom: var(--ficha-borde);
    border-left: 4px solid var(--color-marca);
    color: var(--ficha-grupo-titulo-color);
    display: flex;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 0.55rem;
    letter-spacing: 0.6px;
    padding: 0.7rem 1.25rem;
    text-transform: uppercase;
}

.ficha-grupo-titulo i {
    color: var(--color-marca);
    font-size: 1rem;
}

/* --- Grilla de campos --- */

.ficha-datos {
    display: grid;
    gap: 1.1rem 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
    padding: var(--ficha-padding);
}

.ficha-dato {
    border-left: 2px solid rgba(34, 46, 60, 0.07);
    min-width: 0;
    padding-left: 0.8rem;
}

.ficha-dato dt {
    color: var(--ficha-etiqueta-color);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
}

.ficha-dato dd {
    color: var(--ficha-valor-color);
    font-weight: 500;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

/* Campos largos (domicilio, obra social) que ocupan la fila entera */

.ficha-dato-ancho {
    grid-column: 1 / -1;
}

/* En pantallas anchas la grilla pasa a 3 columnas: con 2 los valores quedaban
   separados por un hueco enorme y se perdia la relacion etiqueta-valor. */

@media (min-width: 1200px) {
    .ficha-datos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ficha-datos {
        grid-template-columns: minmax(0, 1fr);
    }

    .ficha-acciones {
        margin-left: 0;
        width: 100%;
    }
}

/* Filtros de seleccion multiple de los reportes (dropdown con checkboxes).
   Ver templates/partials/_filtros_multiples.html.twig */
.filtro-multi > button {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.filtro-multi .filtro-multi-menu {
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    font-size: 14px;
}

.filtro-multi .form-check {
    margin-bottom: .1rem;
}

.filtro-multi .form-check-label {
    cursor: pointer;
}