/* Componentes visuales reutilizables */

/* Cards de panel y contenido */

.panel-card,
.tab-pane-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
    padding: 18px 18px 20px 18px;
    margin-bottom: 12px;
}

.tab-pane-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}

.section-title,
.diagnostico-group-title,
.subcard-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 8px;
}

/* Summary / dashboard cards */

.dashboard-summary {
    margin-bottom: 20px;
}

.summary-card,
.inventory-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
    padding: 10px 12px;
    height: 100%;
}

.summary-label,
.inventory-card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 4px;
}

.summary-value,
.inventory-card-value {
    font-size: 0.96rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-badge-primary {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    color: #ffffff;
}

.summary-badge-secondary {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #6b7280, #9ca3af);
    color: #ffffff;
}

@media (max-width: 768px) {
    .summary-card,
    .inventory-card {
        margin-bottom: 8px;
    }
}

/* Tabs modernas (usa Bootstrap nav-tabs) */

.page-tabs.nav-tabs {
    border-bottom: 1px solid #e5e7eb;
    background-color: #ffffff;
    border-radius: 12px 12px 0 0;
    padding: 4px 6px 0 6px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.page-tabs .nav-link {
    border: none;
    border-radius: 999px 999px 0 0;
    padding: 10px 18px;
    margin-right: 6px;
    margin-bottom: -1px;
    color: #4b5563;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.15s ease-in-out;
}

.page-tabs .nav-link:hover {
    background-color: #eef2ff;
    color: #1d4ed8;
}

.page-tabs .nav-link.active {
    background-color: #ffffff;
    color: #1d4ed8;
    border-radius: 999px 999px 0 0;
    box-shadow: 0 -1px 0 #ffffff, 0 0 0 1px #e5e7eb, 0 4px 8px rgba(15, 23, 42, 0.06);
}

/* Historial de estados */

.historial-estados {
    margin-top: 24px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.historial-estados-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(90deg, #f8fafc, #eef2ff);
}

.historial-estados-header h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2933;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.historial-estados-body {
    padding: 12px 16px;
}

.historial-estados-item {
    padding: 6px 0;
    font-size: 0.9rem;
    color: #4b5563;
    border-bottom: 1px dashed #e5e7eb;
}

.historial-estados-item:last-child {
    border-bottom: none;
}

.historial-estados-empty {
    padding: 4px 0;
    font-size: 0.9rem;
    color: #6b7280;
}

/* Imágenes pequeñas reutilizables */

.image-preview {
    max-width: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.image-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* Miniaturas de imágenes en tablas (repuestos, etc.) */

.img-preview {
    cursor: pointer;
    transition: opacity 0.2s;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.img-preview:hover {
    opacity: 0.8;
}

/* Secciones de patrón (canvas) - desktop/base */

#patternCanvas {
    border: 2px solid #ccc;
    background-color: #f5f5f5;
    border-radius: 8px;
    width: 200px;
    height: 200px;
}

.pattern-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
    color: white;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.pattern-dot.active {
    background-color: #007bff;
}

.pattern-dot.start {
    background-color: #28a745;
}

.pattern-container {
    position: relative;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.pattern-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Vista móvil: patrón de desbloqueo en editar_reparacion
   - Canvas y puntos legibles, responsivos y centrados (incluido en modales) */
@media (max-width: 768px) {
    .pattern-section {
        flex-direction: column;
        align-items: center;
        margin-bottom: 16px;
    }

    /* Contenedor del patrón dentro y fuera de modales */
    .pattern-container,
    .modal-body .pattern-container {
        width: 90%;
        max-width: 320px;
        margin: 10px auto;
        padding: 12px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        height: auto;
    }

    /* Canvas escalar al ancho disponible (incluye el canvas principal del patrón) */
    #patternCanvas,
    .pattern-canvas,
    .pattern-dots {
        width: 100% !important;
        max-width: 250px;
        height: auto !important;
        display: block;
        margin: 0 auto;
        object-fit: contain;
    }

    /* Puntos táctiles ligeramente más grandes en móvil */
    .pattern-dot {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    /* Inputs de PIN y botón borrar patrón más táctiles */
    #pin {
        min-width: 60px;
        min-height: 38px;
        padding: 6px 8px;
    }

    .pattern-section .btn.btn-secondary {
        margin-top: 10px;
        min-width: 80px;
        min-height: 38px;
        padding: 6px 12px;
        border-radius: 6px;
    }
}

/* Ajuste general de patrón dentro de cualquier modal (desktop y móvil) */
.modal-body .pattern-container {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Vista móvil: tablas de gastos / repuestos en editar_reparacion (cards legibles y uniformes) */
@media (max-width: 768px) {
    /* Ocultar headers de tablas auxiliares en móvil para que no se superpongan con las cards */
    .gastos-table thead {
        display: none;
    }

    /* Card general para cada fila */
    .repuestos-table tbody tr,
    .gastos-table tbody tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        padding: 12px;
        margin-bottom: 14px;
        width: 95%;
        max-width: 360px;
        box-sizing: border-box;
    }

    /* Cada campo como bloque dentro de la card */
    .repuestos-table td,
    .gastos-table td {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 4px 0;
        word-wrap: break-word;
        white-space: normal;
        font-size: 0.9rem;
    }

    /* Labels encima del valor: sin negrita y más pequeños */
    .repuestos-table td[data-label]::before,
    .gastos-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 400; /* normal */
        font-size: 0.7rem; /* más pequeño */
        color: #555;
        margin-bottom: 2px;
    }

    /* Valores principales destacados (Nombre/Tipo/Monto) */
    .repuestos-table td[data-label="Nombre"] span,
    .gastos-table td[data-label="Tipo"] span,
    .gastos-table td[data-label="Monto"] span {
        font-weight: 600;
        font-size: 1rem;
    }

    .gastos-table td[data-label="Descripción"] {
        font-size: 0.9rem;
        color: #333;
    }

    /* Monto y Fecha alineados en fila (en la práctica pueden apilarse si no entra) */
    .gastos-table td[data-label="Monto"],
    .gastos-table td[data-label="Fecha"] {
        display: inline-block;
        margin-right: 12px;
    }

    /* Botón eliminar / acciones al pie de la card */
    .repuestos-table td[data-label="Acción"],
    .gastos-table td[data-label="Acción"] {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
    }

    .repuestos-table td[data-label="Acción"] button,
    .gastos-table td[data-label="Acción"] button {
        min-width: 60px;
        min-height: 38px;
        padding: 6px 12px;
        border-radius: 6px;
        background-color: #e3342f;
        color: #fff;
        border: none;
    }

    /* Inputs y selects táctiles dentro de estas tablas */
    .repuestos-table input,
    .repuestos-table select,
    .gastos-table input,
    .gastos-table select {
        min-width: 60px;
        min-height: 38px;
        margin-top: 4px;
    }

    /* Imagen de repuestos dentro de la card */
    .repuestos-table td img {
        width: 100px;
        max-width: 100%;
        height: auto;
        margin: 6px auto;
        object-fit: contain;
        display: block;
    }

    /* Repuestos usados: hacer más compacto el input de cantidad junto al selector */
    .repuestos-container .repuesto-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .repuestos-container .repuesto-row select {
        width: 100%;
    }

    .repuestos-container .repuesto-row input[type="number"],
    .repuestos-container .repuesto-row input[type="text"] {
        max-width: 80px;
        min-width: 40px;
        min-height: 30px;
        padding: 4px 6px;
        font-size: 0.85rem;
        align-self: flex-start;
    }
}

/* Repuestos (componentes genéricos de filas de items) */

.repuestos-container {
    margin-bottom: 20px;
}

.repuesto-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.repuesto-row select {
    flex: 3;
}

.repuesto-row input {
    flex: 1;
    width: 100px;
}

.repuestos-registro {
    margin-top: 20px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
}

.repuestos-registro p {
    margin: 0;
}

.repuestos-buttons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

/* Columnas de texto con truncado */

.text-column {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    cursor: pointer;
}

.text-box {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    max-width: 200px;
    width: 200px;
    white-space: normal;
    word-wrap: break-word;
    font-size: 0.9rem;
    color: #333;
    display: none;
}

/* Bloques internos para pestaña de acceso */

.access-layout-row {
    align-items: stretch;
}

.access-block {
    background-color: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 14px 16px;
    height: 100%;
}

.access-block-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

/* Diagnóstico (bloques internos) */

.diagnostico-section + .diagnostico-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
}

/* Tablas tipo app-table (desktop) */

.app-table.table td,
.app-table.table th {
    padding: 0.35rem 0.45rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.app-table.table thead th {
    background-color: #1f2937;
    color: #fff;
    font-weight: 500;
    border-bottom: none;
}

.app-table.table tbody tr:hover {
    background-color: #e9ecef;
}

/* Tabla de repuestos en escritorio */

#repuestosTable {
    table-layout: fixed;
    width: 100%;
}

#repuestosTable th:nth-child(1),
#repuestosTable td:nth-child(1) {
    width: 28%;
}

#repuestosTable th:nth-child(2),
#repuestosTable td:nth-child(2) {
    width: 14%;
}

#repuestosTable th:nth-child(3),
#repuestosTable td:nth-child(3) {
    width: 34%;
}

#repuestosTable th:nth-child(4),
#repuestosTable td:nth-child(4) {
    width: 10%;
}

#repuestosTable th:nth-child(5),
#repuestosTable td:nth-child(5) {
    width: 14%;
}

/* Celda de acciones más compacta */

#repuestosTable td:last-child {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
}

/* Botones pequeños y compactos */

.btn-sm {
    padding: 0.18rem 0.45rem;
    font-size: 0.78rem;
    border-radius: 999px;
}

/* Input de cantidad más compacto */

.quantity-input {
    width: 65px;
    padding: 0.2rem 0.3rem;
    font-size: 0.85rem;
}

/* Controles de cantidad en línea */

.quantity-controls,
.quantity-controls-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-save-inline {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* Acciones en línea con iconos */

.actions-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-action-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.actions-cell,
.quantity-cell {
    white-space: nowrap;
}

/* Badges de stock en celdas de cantidad */
.stock-cell-empty {
    background-color: #fef2f2 !important;
}

.stock-cell-low {
    background-color: #fffbeb !important;
}

.stock-cell-ok {
    background-color: #f0fdf4 !important;
}

#repuestosTable td,
#repuestosTable th {
    vertical-align: middle;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Modal de imágenes (repuestos) */

.modal .modal-dialog {
    max-width: min(800px, 95vw);
    margin: 1rem auto;
}

.modal .modal-content {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal .modal-body {
    max-height: 85vh;
    overflow-y: auto;
    padding: 1rem;
}

.modal-img {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Modales de patrón de desbloqueo en reparaciones:
   limitar tamaño para que no ocupe toda la pantalla */
div[id^="patternModal_"] .modal-dialog {
    max-width: min(420px, 95vw);
}

div[id^="patternModal_"] .modal-img {
    max-width: 360px;
    max-height: 360px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Vista móvil genérica para TODAS las tablas .app-table
   - Rompe el layout de tabla y lo convierte en tarjetas verticales
   - Reutiliza el mismo estilo base que repuestos.php */
@media (max-width: 768px) {
    /* Evitar scroll horizontal de contenedores responsivos cuando hay app-table */
    .table-responsive {
        overflow-x: visible;
    }

    table.app-table {
        border-collapse: separate;
        border-spacing: 0 8px;
        width: 100%;
    }
    table.app-table thead {
        display: none;
    }
    table.app-table tbody {
        display: block;
        max-width: 480px;
        margin: 0 auto;
    }
    table.app-table tbody tr.mobile-table-card {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        align-items: flex-start;
        background-color: #ffffff;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    table.app-table tbody tr.mobile-table-card td {
        display: block;
        width: 100%;
        border-top: none;
        padding: 6px 4px;
        font-size: 0.85rem;
    }
    table.app-table tbody tr.mobile-table-card td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        display: block;
        margin-bottom: 2px;
    }

    /* Tamaños táctiles mínimos para inputs y botones en móvil */
    .quantity-input,
    .btn-save-inline,
    .btn-action-icon {
        min-width: 60px;
        min-height: 38px;
    }
}

/* Vista móvil específica: productos (#productosTable)
   Orden deseado en cards (de arriba a abajo):
   1) Nombre
   2) Descripción
   3) Imagen
   4) Stock
   5) Precio
   6) Marca
   7) Modelo
   8) Nro de Serie
   9) IMEI
   10) Categoría
   11) Acciones (botones abajo del todo) */
@media (max-width: 768px) {
    #productosTable thead {
        display: none;
    }
    #productosTable {
        border-collapse: separate;
        border-spacing: 0 8px;
        width: 100%;
    }
    #productosTable tbody {
        display: block;
        max-width: 480px;
        margin: 0 auto;
    }
    #productosTable tbody .mobile-table-card {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        align-items: flex-start;
        background-color: #ffffff;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    #productosTable tbody .mobile-table-card td {
        display: block;
        width: 100%;
        border-top: none;
        padding: 6px 4px;
        font-size: 0.85rem;
        /* Posición base al final, las clases específicas reordenan */
        order: 10;
    }
    #productosTable tbody .mobile-table-card td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        display: block;
        margin-bottom: 2px;
    }
    #productosTable tbody .mobile-table-card .product-name-cell { order: 1; }
    #productosTable tbody .mobile-table-card .product-desc-cell { order: 2; }
    #productosTable tbody .mobile-table-card .product-image-cell { order: 3; }
    #productosTable tbody .mobile-table-card .product-stock-cell { order: 4; }
    #productosTable tbody .mobile-table-card .product-price-cell { order: 5; }
    #productosTable tbody .mobile-table-card .product-marca-cell { order: 6; }
    #productosTable tbody .mobile-table-card .product-modelo-cell { order: 7; }
    #productosTable tbody .mobile-table-card .product-nroserie-cell { order: 8; }
    #productosTable tbody .mobile-table-card .product-imei-cell { order: 9; }
    #productosTable tbody .mobile-table-card .product-categoria-cell { order: 10; }
    #productosTable tbody .mobile-table-card .product-actions-cell { order: 11; }
    #productosTable tbody .mobile-table-card .product-actions-cell .actions-inline {
        gap: 8px;
    }
}

/* Vista móvil específica: repuestos (#repuestosTable)
   Orden deseado en cards (Nombre → Descripción → Imagen → Cantidad/Acciones) */
@media (max-width: 768px) {
    /* Bloqueo específico de repuestos según prompt */
    #repuestosTable thead {
        display: none;
    }
    #repuestosTable tbody {
        display: block;
        max-width: 480px;
        margin: 0 auto;
    }
    #repuestosTable tbody .mobile-table-card {
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
        padding: 12px;
        margin-bottom: 10px;
    }
    #repuestosTable tbody .mobile-table-card td {
        display: block;
        width: 100%;
        border-top: none;
        padding: 6px 4px;
        font-size: 0.85rem;
        order: 10;
    }
    #repuestosTable tbody .mobile-table-card td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        display: block;
        margin-bottom: 2px;
    }
    #repuestosTable tbody .mobile-table-card .stock-rep-nombre-cell { order: 1; }
    #repuestosTable tbody .mobile-table-card .stock-rep-desc-cell { order: 2; }
    #repuestosTable tbody .mobile-table-card .stock-rep-image-cell {
        order: 3;
        display: flex;
        justify-content: center;
        margin: 6px 0;
    }
    #repuestosTable tbody .mobile-table-card .stock-rep-image-cell .img-preview {
        max-width: 120px;
        max-height: 120px;
        object-fit: contain;
    }
    #repuestosTable tbody .mobile-table-card .stock-rep-cantidad-cell,
    #repuestosTable tbody .mobile-table-card .stock-rep-actions-cell {
        order: 4;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    #repuestosTable tbody .mobile-table-card .quantity-input,
    #repuestosTable tbody .mobile-table-card .btn-save-inline,
    #repuestosTable tbody .mobile-table-card .btn-action-icon {
        min-width: 60px;
        min-height: 38px;
        font-size: 0.85rem;
    }
}

/* Vista móvil unificada para cards de productos y repuestos
   - Mejora legibilidad de Nombre, Descripción e Imagen
   - Mantiene el orden ya definido por reglas anteriores */
@media (max-width: 768px) {
    /* Estilo de card para filas de productos y repuestos */
    #productosTable tbody tr.mobile-table-card,
    #repuestosTable tbody tr.mobile-table-card {
        display: block;
        margin-bottom: 12px;
        background: #ffffff;
        border-radius: 8px;
        padding: 10px 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    #productosTable tbody tr.mobile-table-card td,
    #repuestosTable tbody tr.mobile-table-card td {
        display: flex;
        flex-direction: column;
        text-align: left;
        padding: 4px 0;
        white-space: normal;
    }

    /* Imagen centrada y contenida dentro de la card */
    #productosTable tbody tr.mobile-table-card td img.img-preview,
    #repuestosTable tbody tr.mobile-table-card td img.img-preview {
        width: 100px;
        max-width: 100%;
        height: auto;
        margin-bottom: 6px;
        object-fit: contain;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Nombre destacado en la card */
    #productosTable tbody tr.mobile-table-card td[data-label="Nombre"],
    #repuestosTable tbody tr.mobile-table-card td[data-label="Nombre"] {
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 4px;
    }

    /* Descripción en varias líneas, color más oscuro */
    #productosTable tbody tr.mobile-table-card td[data-label="Descripción"],
    #repuestosTable tbody tr.mobile-table-card td[data-label="Descripción"] {
        font-size: 0.9rem;
        color: #333333;
    }

    /* Label encima del valor para cualquier columna con data-label */
    #productosTable tbody tr.mobile-table-card td[data-label]::before,
    #repuestosTable tbody tr.mobile-table-card td[data-label]::before {
        content: attr(data-label);
        font-weight: 500;
        font-size: 0.8rem;
        color: #555555;
        display: block;
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Bloque de acciones al final de la card */
    #productosTable tbody tr.mobile-table-card td.product-actions-cell,
    #repuestosTable tbody tr.mobile-table-card td.stock-rep-actions-cell {
        display: flex;
        gap: 6px;
        margin-top: 8px;
    }
}

/* Vista móvil específica: historial de ventas (#historialVentasTable)
   Orden deseado en cards:
   1) Cliente
   2) Remito / Detalle
   3) Fecha
   4) Total
   5) Acciones */
@media (max-width: 768px) {
    #historialVentasTable thead {
        display: none;
    }
    #historialVentasTable {
        border-collapse: separate;
        border-spacing: 0 8px;
        width: 100%;
    }
    #historialVentasTable tbody {
        display: block;
        max-width: 480px;
        margin: 0 auto;
    }
    #historialVentasTable tbody .mobile-table-card {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        align-items: flex-start;
        background-color: #ffffff;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    #historialVentasTable tbody .mobile-table-card td {
        display: block;
        width: 100%;
        border-top: none;
        padding: 6px 4px;
        font-size: 0.85rem;
        order: 10;
    }
    #historialVentasTable tbody .mobile-table-card td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        display: block;
        margin-bottom: 2px;
    }
    #historialVentasTable tbody .mobile-table-card .venta-cliente-cell {
        order: 1;
    }
    #historialVentasTable tbody .mobile-table-card .venta-remito-cell {
        order: 2;
    }
    #historialVentasTable tbody .mobile-table-card .venta-fecha-cell {
        order: 3;
    }
    #historialVentasTable tbody .mobile-table-card .venta-total-cell {
        order: 4;
    }
    #historialVentasTable tbody .mobile-table-card .venta-actions-cell {
        order: 5;
    }
}

/* Badges suaves reutilizables para estados/stock */
.badge-soft-primary {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.badge-soft-success {
    background-color: #dcfce7;
    color: #15803d;
}

.badge-soft-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-soft-danger {
    background-color: #fee2e2;
    color: #b91c1c;
}