.form-layout{
    border-radius: 15px;
    width: 500px;
}

.dropdown-danger{
    background-color: #dc3545;
    --bs-dropdown-link-hover-bg:#a52834;
    color: #fff;
} 
/* Resaltado de la fila enfocada en los select2 (autocomplete).

   Va con `.select2-container--open` (0,4,0) por dos motivos: la hoja de dal se
   emite en el <body> con {{ media.css }}, o sea después de ésta, así que hay
   que ganarle por especificidad; y así no depende del tema, que sólo colorea
   la fila cuando la hoja de ese tema está cargada. Su regla además ata los
   colores a variables del admin de Django (--selected-row, --body-fg) que aquí
   no existen, y en modo oscuro deja la fila ilegible. */
.select2-container.select2-container--open .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd;
    color: #fff;
}

/* Select2 se dibuja más bajo que los inputs de Bootstrap y descuadra las filas.
   La regla estaba repetida en cada plantilla que monta un select2. */
.select2-container .select2-selection.select2-selection--single {
    height: 38px;
    padding-top: 6px;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    top: 6px;
}

/* Impresión de los balances.

   Bootstrap ya trae `.d-print-none`, que es lo que marcan las plantillas para
   filtros, botones, pestañas y textos de ayuda. Aquí queda lo que no se puede
   marcar campo por campo: el navbar y los mensajes viven en
   `accounts/base.html`, y los controles de DataTables los genera la librería.

   Las reglas se limitan a la impresión normal: DataTables abre su propia
   ventana con `body.dt-print-view` y ahí solo hay una tabla. */
@media print {
    @page {
        margin: 10mm;
    }

    /* Menús y controles: nada de esto es parte del reporte. */
    .navbar,
    .alert,
    .dt-buttons,
    .dt-search,
    .dt-length,
    .dt-info,
    .dt-paging {
        display: none !important;
    }

    /* El contenedor de Bootstrap deja márgenes enormes en papel, y la letra de
       pantalla desperdicia hoja. */
    div.container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        /* `accounts/base.html` cierra con un <style> que pone la caja al 90%.
           Va después en el documento y tiene la misma especificidad, así que
           sin !important gana él y la letra no baja. */
        font-size: 7.5pt !important;
    }

    /* `.small` es 0.875em y se iría encogiendo al anidarse: se fija. */
    .small,
    small,
    table {
        font-size: 7pt !important;
    }

    h4 {
        font-size: 11pt;
        margin-bottom: 0;
    }

    h5 {
        font-size: 9pt;
        margin-bottom: 0.2rem;
    }

    /* Las flechas de ordenar de DataTables no significan nada en papel. */
    .dt-column-order {
        display: none !important;
    }

    /* Filas más apretadas: en una tarjeta de balance son todas de una línea. */
    .table-sm > :not(caption) > * > * {
        padding: 0.08rem 0.25rem;
    }

    .card-header {
        padding: 0.1rem 0.3rem !important;
    }

    /* `h-100` iguala la altura de las tarjetas y deja huecos en blanco. */
    .card {
        break-inside: avoid;
        page-break-inside: avoid;
        height: auto !important;
    }

    /* Los fondos de color no se imprimen por omisión y dejan la tarjeta sin
       encabezado visible: se fuerza el borde para que siga separándose. */
    .card,
    .card-header {
        border: 1px solid #999 !important;
    }

    /* Tres tarjetas por fila: el ancho de la hoja da de sobra con esta letra y
       así el balance completo entra en una página. */
    .balance-cards > * {
        flex: 0 0 auto !important;
        width: 33.3333% !important;
    }

    /* La grilla del mensual vive en un contenedor con `scrollY: 55vh`, así que
       en papel saldría recortada a lo que se ve en pantalla. */
    .dt-scroll-body,
    .table-responsive {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Esa misma grilla son 13 columnas y DataTables le fija el ancho en píxeles
       para poder desplazarla: en papel se sale y la última columna se corta. Se
       la obliga a caber, y con `table-layout: fixed` reparte el ancho en vez de
       dárselo todo a las primeras columnas. */
    .dt-scroll table,
    .table-responsive > table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }

    .dt-scroll table col,
    .table-responsive > table col {
        width: auto !important;
    }

    /* DataTables le pone un ancho en línea al envoltorio del encabezado, más
       15px de relleno para compensar la barra de desplazamiento. Sin quitarlo,
       la tabla del encabezado sale más ancha que la del cuerpo y las columnas
       quedan corridas ~37px al llegar a la última. */
    .dt-scroll-headInner,
    .dt-scroll-footInner {
        width: 100% !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Con el ancho repartido, los importes tienen que poder cortar línea. */
    .dt-scroll table th,
    .dt-scroll table td,
    .table-responsive > table th,
    .table-responsive > table td {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* En papel un balance es un reporte, no un formulario: las cifras que se
       digitan salen como texto y no como cajas de input vacías. */
    input[type="number"] {
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        appearance: textfield;
        -moz-appearance: textfield;
        /* `.form-control-sm` trae `min-height` y estira la fila: sin esto la
           línea de ViaBills sale más alta que la de Cheques. */
        height: auto !important;
        min-height: 0 !important;
        line-height: inherit !important;
        font-size: inherit !important;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}