.btn_entregado {
            background-color:#28a745; color:white; padding:5px 10px; border-radius:5px;
        }
        
        /* Estilos normales (desktop) */
        table.datagrid {
            width: 100%;
            border-collapse: collapse;
        }

        table.datagrid th, 
        table.datagrid td {
            padding: 8px;
            border: 1px solid #444;
            text-align: left;
        }

 /* Versión móvil */
    @media (max-width: 768px) {
        table.datagrid thead {
            display: none; /* Ocultamos encabezados */
        }

        table.datagrid,
        table.datagrid tbody,
        table.datagrid tr,
        table.datagrid td {
            display: block;
            width: 100%;
        }

        table.datagrid tr {
            margin-bottom: 1rem;
            border: 1px solid #555;
            border-radius: 6px;
            padding: 8px;
            background: #111; /* fondo oscuro para EasyAdmin */
        }

        table.datagrid td {
            text-align: left;        /* alineamos el texto */
            padding-left: 50%;       /* espacio para el título */
            position: relative;
            border: none;            /* quitamos bordes internos */
            border-bottom: 1px solid #333;
        }

        table.datagrid td:last-child {
            border-bottom: none; /* quitamos borde en el último */
        }

        table.datagrid td::before {
            content: attr(data-titulo) !important;
            position: absolute;
            left: 10px;
            top: 8px;
            width: 45%;
            font-weight: bold;
            color: #bbb; /* título en gris claro */
            text-align: left;
            white-space: nowrap;
        }
    }

    .login-box{
        width: 400px;
        margin: 0 auto ;
        margin-top: 10%;
    }

    .login-box label, .login-box input{ width: 100%; margin-bottom: 10px;}

    .login-box .h3{
        text-align: center;
    }

     /* Auto completado*/
    .autocomplete-dropdown {
        max-height: 0;
        overflow: hidden;
        position: absolute;
        z-index: 9999;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        opacity: 0;
    }

    /* MODO CLARO */
    html[data-theme="light"] .autocomplete-dropdown {
        background: #ffffff;
        border: 1px solid #ccc;
        color: #000;
    }

    /* MODO OSCURO */
    html[data-theme="dark"] .autocomplete-dropdown {
        background: #171717;
        border: 1px solid #555;
        color: #f0f0f0;
    }

    /* MODO CLARO */
    html[data-theme="light"] .autocomplete-dropdown.show {
        background: #ffffff;
    }

    /* MODO OSCURO */
    html[data-theme="dark"] .autocomplete-dropdown.show {
        background: #171717;
    }

    .autocomplete-dropdown.show {
        max-height: 200px;
        opacity: 1;
    }

    html[data-theme="light"] .autocomplete-dropdown.show{
         background: #f60;
    }

    .autocomplete-dropdown .option:hover {
        background-color: #eee;
    }

    .autocomplete-input {
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
        margin-bottom: 2px;
    }
    
    .content-header-title {
        flex: 0;
    }
    .content-header {
        display: flex !important;
        justify-content: flex-start !important; /* título y acciones a la izquierda */
        align-items: center !important;
        gap: 1rem; /* separación entre título y botones */
    }

    .content-header-title {
        order: 1; /* primero el título */
    }

    .page-actions {
        order: 2; /* luego las acciones */
        margin-left: 1rem;
    }
    /* Input File area transporte*/
    .custom-file-upload {
        position: relative;
        display: inline-block;
    }

    .custom-file-upload input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .datagrid tbody tr.selected-row td{
        background: var(--table-thead-color);
    }

    /* CARDS */
    .cards-container {
        display: flex;
        flex-wrap: wrap; /* Permite que las cards se acomoden en varias filas */
        gap: 1rem;       /* Espacio entre las cards */
    }

    .card {
        border-radius: 10px;
        padding: 1rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        flex: 1 1 250px; /* 1: crecer, 1: encoger, 250px: ancho mínimo */
        max-width: 300px;
    }

    .card:hover {
        transform: translateY(-3px);
    }

    .card-item strong {
        display: inline-block;
        width: 140px;
        color: #333;
    }



        /* Variables para modo claro */
    
        :root {
            --selected-row-bg_pedidos: #ccc;
            --selected-row-text: #444;
        }

        /* Variables para modo oscuro */
 
        [data-theme="dark"] {
            --selected-row-bg: #444;
            --selected-row-text: #444;
        }

        .datagrid tbody tr.selected-row-2 td {
            background: var(--selected-row-bg_pedidos) !important;
            color: var(--selected-row-text) !important;
        }

    .datagrid tbody tr.selected-row-2 td ::-moz-selection {
        background: transparent
    }
    .datagrid tr:not(.selected-row-2):hover .dropdown-toggle {
        background: var(--dropdown-toggle-bg);
        border-color: var(--dropdown-toggle-border-color)
    }

    /* Ocultar el botón al imprimir */
    @media print {
        body * {
            visibility: hidden;
        }
        .cards-container, .cards-container * {
            visibility: visible;
        }
        .cards-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        .no-print {
            display: none !important;
        }
    }

    .btn-marcar-fecha{
        display: none;
    }

    /* Oculta el selector de comparación de fecha */
    /*#filters_fecha_corte_comparison {
        display: none !important;
    }*/

    /*  Spinner */
    #loaderCustom{
        display:none; 
        position:fixed; 
        top:20%; 
        left:90%; 
        width:10%; height:10%;
        background:rgba(0,0,0,0.3); z-index:9999; display:flex; justify-content:center; align-items:center;
    }

    .content-spinner{
        padding:12px; display:flex; flex-direction:column; align-items:center;
    }

    @media (max-width: 768px) {
        #loaderCustom {
            top: 85%;
            left: 50%;
            transform: translateX(-50%);
            width: 30%;
            height: 12%;
            padding: 0;
        }

        .spinnerCustom {
            width: 30px;
            height: 30px;
        }
    }