/* Estilo para el botón "Guardar Marca No Oficial" en el modal de inserción */
.marcas-no-oficiales-page #insertarMarcaNoOficialModal button.btn.btn-outline-warning[form="formInsertarMarcaNoOficial"] {
    color: #28A745 !important; /* Texto y borde verde */
    border-color: #28A745 !important;
    transition: all 0.3s ease;
}

.marcas-no-oficiales-page #insertarMarcaNoOficialModal button.btn.btn-outline-warning[form="formInsertarMarcaNoOficial"]:hover {
    background-color: #28A745 !important; /* Fondo verde al pasar el mouse */
    color: #fff !important; /* Texto blanco al pasar el mouse */
    border-color: #28A745 !important;
    transform: translateY(-2px); /* Efecto de elevación */
}

/* Estilo para el botón "Guardar Cambios" en el modal de edición */
.marcas-no-oficiales-page #editMarcaNoOficialModal button.btn.btn-outline-warning[form="formEditarMarcaNoOficial"] {
    color: #28A745 !important; /* Texto y borde verde */
    border-color: #28A745 !important;
    transition: all 0.3s ease;
}

.marcas-no-oficiales-page #editMarcaNoOficialModal button.btn.btn-outline-warning[form="formEditarMarcaNoOficial"]:hover {
    background-color: #28A745 !important; /* Fondo verde al pasar el mouse */
    color: #fff !important; /* Texto blanco al pasar el mouse */
    border-color: #28A745 !important;
    transform: translateY(-2px); /* Efecto de elevación */
}
/* Estilo para el botón "Limpiar Filtros" */
.marcas-no-oficiales-page button#limpiarFiltros.btn.btn-outline-danger {
    color: #007BFF !important; /* Color del texto y borde */
    border-color: #007BFF !important;
    transition: all 0.3s ease;
}

.marcas-no-oficiales-page button#limpiarFiltros.btn.btn-outline-danger:hover {
    background-color: #007BFF !important; /* Fondo al pasar el mouse */
    color: #fff !important; /* Texto blanco al pasar el mouse */
    border-color: #007BFF !important;
    transform: translateY(-2px);
}

/* Estilo para el botón "Nueva Marca" */
.marcas-no-oficiales-page button.btn.btn-danger[data-target="#insertarMarcaNoOficialModal"] {
    background-color: #28A745 !important; /* Fondo verde */
    border-color: #28A745 !important;
    transition: all 0.3s ease;
}

.marcas-no-oficiales-page button.btn.btn-danger[data-target="#insertarMarcaNoOficialModal"]:hover {
    background-color: #218838 !important; /* Verde más oscuro al pasar el mouse */
    border-color: #218838 !important;
    transform: translateY(-2px);
}
/* Estilos específicos para la sección de marcas no oficiales */
.marcas-no-oficiales-page .marcas-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.marcas-no-oficiales-page .marcas-table .marca-column {
    font-weight: bold;
}

.marcas-no-oficiales-page .marcas-table .mejora-verde {
    color: #28a745;
}

.marcas-no-oficiales-page .marcas-table .mejora-roja {
    color: #dc3545;
}

.marcas-no-oficiales-page .marcas-table .marca-verde-negrita {
    color: #28a745;
    font-weight: bold;
}

/* Ajustes de columnas específicas - Sin filtro aplicado (todas las columnas visibles) */
.marcas-no-oficiales-page .marcas-table th:nth-child(1),
.marcas-no-oficiales-page .marcas-table td:nth-child(1) { /* Prueba */
    width: 25%;
}

.marcas-no-oficiales-page .marcas-table th:nth-child(2),
.marcas-no-oficiales-page .marcas-table td:nth-child(2) { /* Fecha */
    width: 15%;
}

.marcas-no-oficiales-page .marcas-table th:nth-child(3),
.marcas-no-oficiales-page .marcas-table td:nth-child(3) { /* Marca */
    width: 15%;
}

.marcas-no-oficiales-page .marcas-table th:nth-child(4),
.marcas-no-oficiales-page .marcas-table td:nth-child(4) { /* Lugar */
    width: 25%;
}

.marcas-no-oficiales-page .marcas-table th:nth-child(5),
.marcas-no-oficiales-page .marcas-table td:nth-child(5) { /* Acciones (Eliminar) */
    width: 50px; /* Fijar un ancho específico para la columna de acciones */
    min-width: 50px;
    max-width: 50px;
}

/* Ajustes de columnas específicas - Con filtro aplicado (columna Prueba oculta) */
.marcas-no-oficiales-page .marcas-table.filter-applied th:nth-child(1),
.marcas-no-oficiales-page .marcas-table.filter-applied td:nth-child(1) { /* Fecha */
    width: 20%;
}

.marcas-no-oficiales-page .marcas-table.filter-applied th:nth-child(2),
.marcas-no-oficiales-page .marcas-table.filter-applied td:nth-child(2) { /* Marca */
    width: 20%;
}

.marcas-no-oficiales-page .marcas-table.filter-applied th:nth-child(3),
.marcas-no-oficiales-page .marcas-table.filter-applied td:nth-child(3) { /* Lugar */
    width: 40%; /* Aumentar el ancho para compensar la columna Prueba oculta */
}

.marcas-no-oficiales-page .marcas-table.filter-applied th:nth-child(4),
.marcas-no-oficiales-page .marcas-table.filter-applied td:nth-child(4) { /* Acciones (Eliminar) */
    width: 50px; /* Mantener el ancho fijo para la columna de acciones */
    min-width: 50px;
    max-width: 50px;
}

/* Estilos para el contenedor de la tabla */
.marcas-no-oficiales-page .table-wrapper {
    margin-bottom: 20px;
}

.marcas-no-oficiales-page .table-wrapper h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

/* Estilo para los botones de filtro */
.marcas-no-oficiales-page .row.mb-3 .btn {
    padding: 5px 10px;
    font-size: 14px;
}

/* Estilo para el botón de eliminar */
.marcas-no-oficiales-page .marcas-table .btn-icon.delete-btn {
    color: #dc3545; /* Color rojo */
}

.marcas-no-oficiales-page .marcas-table .btn-icon.delete-btn svg {
    fill: #dc3545; /* Forzar el color del ícono SVG */
}

/* Estilo para la fila de notas */
.marcas-no-oficiales-page .marcas-table .notas-row td {
    text-align: left;
    padding: 10px;
    background-color: #f9f9f9;
    font-style: italic;
    border-top: none;
    white-space: pre-wrap; /* Respetar saltos de línea */
}

/* Media query para dispositivos móviles */
@media (max-width: 576px) {
    .marcas-no-oficiales-page   .d-flex.justify-content-center {
        flex-direction: column;
        align-items: center;
    }

    .marcas-no-oficiales-page  .d-flex.justify-content-center .btn {
        width: 100%;
        max-width: 300px;
        margin-bottom: 10px;
    }

    .marcas-no-oficiales-page  .d-flex.justify-content-center .btn:last-child {
        margin-bottom: 0;
    }

    .marcas-no-oficiales-page .marcas-container {
        padding: 0;
        width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }

    .marcas-no-oficiales-page  .marcas-table {
        width: auto;
        min-width: 100%;
        table-layout: auto;
    }

    .marcas-no-oficiales-page   .marcas-table th,
    .marcas-no-oficiales-page  .marcas-table td {
        padding: 2px;
        font-size: 10px;
        box-sizing: border-box;
    }

    .marcas-no-oficiales-page  .marcas-table th,
    .marcas-no-oficiales-page  .marcas-table td {
        white-space: normal;
        word-break: break-word;
    }

    /* Sin filtro aplicado */
    .marcas-no-oficiales-page  .marcas-table:not(.filter-applied) th:nth-child(1),
    .marcas-no-oficiales-page .marcas-table:not(.filter-applied) td:nth-child(1) { /* Prueba */
        min-width: 50px;
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .marcas-no-oficiales-page  .marcas-table:not(.filter-applied) th:nth-child(2),
    .marcas-no-oficiales-page  .marcas-table:not(.filter-applied) td:nth-child(2), /* Fecha */
    .marcas-no-oficiales-page  .marcas-table:not(.filter-applied) th:nth-child(3),
    .marcas-no-oficiales-page  .marcas-table:not(.filter-applied) td:nth-child(3) { /* Marca */
        min-width: 40px;
        max-width: 60px;
        white-space: nowrap;
    }

    .marcas-no-oficiales-page  .marcas-table:not(.filter-applied) th:nth-child(4),
    .marcas-no-oficiales-page  .marcas-table:not(.filter-applied) td:nth-child(4) { /* Lugar */
        min-width: 60px;
        max-width: none;
        white-space: normal;
        word-break: break-word;
    }

    .marcas-no-oficiales-page   .marcas-table:not(.filter-applied) th:nth-child(5),
    .marcas-no-oficiales-page  .marcas-table:not(.filter-applied) td:nth-child(5) { /* Acciones */
        min-width: 30px;
        max-width: 30px;
        padding: 2px;
    }

    /* Con filtro aplicado */
    .marcas-no-oficiales-page  .marcas-table.filter-applied {
        table-layout: fixed;
        width: 100%;
    }

    .marcas-no-oficiales-page   .marcas-table.filter-applied th:nth-child(1),
    .marcas-no-oficiales-page  .marcas-table.filter-applied td:nth-child(1), /* Fecha */
    .marcas-no-oficiales-page  .marcas-table.filter-applied th:nth-child(2),
    .marcas-no-oficiales-page  .marcas-table.filter-applied td:nth-child(2) { /* Marca */
        min-width: 40px;
        max-width: 90px;
        white-space: nowrap;
    }

    .marcas-no-oficiales-page  .marcas-table.filter-applied th:nth-child(3),
    .marcas-no-oficiales-page   .marcas-table.filter-applied td:nth-child(3) { /* Lugar */
        min-width: 60px;
        max-width: none;
        white-space: normal;
        word-break: break-word;
    }

    .marcas-no-oficiales-page   .marcas-table.filter-applied th:nth-child(4),
    .marcas-no-oficiales-page   .marcas-table.filter-applied td:nth-child(4) { /* Acciones */
        min-width: 30px;
        max-width: 30px;
        padding: 2px;
        width: 30px;
    }

    .marcas-no-oficiales-page   .marcas-table .btn-icon {
        padding: 0;
        margin: 0;
        display: inline-block;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
    }

    .marcas-no-oficiales-page   .marcas-table .btn-icon svg {
        width: 12px;
        height: 12px;
        vertical-align: middle;
    }

    .marcas-no-oficiales-page   .table-wrapper h3 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .marcas-no-oficiales-page   .row.mb-3 .btn {
        font-size: 12px;
        padding: 4px 8px;
    }
}