@media (max-width: 768px) {
    /* 1. Reset de cabecera y estructura de tarjeta */
    .table-responsive-mobile thead { display: none !important; }
    
    .table-responsive-mobile tr {
        display: block !important;
        background-color: #ececec !important; /* Gris ceniza suave */
        border: 1px solid #d1d1d1 !important;
        border-radius: 15px !important;
        margin-bottom: 25px !important;
        padding: 18px !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.08) !important;
    }
    
    .table-responsive-mobile td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    }

    .table-responsive-mobile td::before {
        content: attr(data-label);
        font-weight: 800;
        color: #555;
        text-transform: uppercase;
        font-size: 0.7rem;
    }

    /* 2. CHAT: Forzar ancho completo y estilo de ventana hundida */
    .table-responsive-mobile td[data-label="Chat"] {
        display: block !important;
        width: 100% !important;
        border-bottom: none !important;
    }

    /* La ventanita de mensajes (el historial) */
    .table-responsive-mobile td[data-label="Chat"] div.p-2.border.rounded {
        background-color: #dfdfdf !important; /* Mismo gris un pelín más oscuro */
        border: 1px solid #bcbcbc !important; /* Borde más marcado */
        color: #333 !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important; /* Efecto hundido */
        margin-top: 10px;
        max-width: 100% !important;
    }

    /* 3. Gestión y Botones */
    .table-responsive-mobile td[data-label="Gestión"],
    .table-responsive-mobile td[data-label="Historial"] {
        display: block !important;
        width: 100% !important;
    }

    .btn {
        width: 100% !important;
        padding: 14px !important;
        font-weight: bold !important;
        margin-top: 10px !important;
    }

    .input-group .form-control {
        font-size: 16px; /* Evita zoom en iOS */
    }
}

/* Colores de estados (Siempre fuera del media query) */
.badge.Pendiente { background-color: #ffc107; color: #000; }
.badge.En.Proceso { background-color: #17a2b8; color: #fff; }
.badge.Listo { background-color: #28a745; color: #fff; }

@media (max-width: 768px) {
    .table-responsive-mobile thead { display: none !important; }
    
    /* Forzamos el fondo gris ceniza y quitamos sombras de Bootstrap */
    .table-responsive-mobile tr {
        display: block !important;
        background-color: #f2f2f2 !important; /* Gris ceniza */
        border: 1px solid #d1d1d1 !important;
        border-radius: 15px !important;
        margin-bottom: 25px !important;
        padding: 15px !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
    }
    
    .table-responsive-mobile td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 !important;
        background: transparent !important; /* Evita que el td tape el gris del tr */
        border: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    }

    /* EL CHAT: Ocupará todo el ancho */
    .table-responsive-mobile td[data-label="Chat"] {
        display: block !important; /* Cambiamos flex por block */
        width: 100% !important;
    }

    .table-responsive-mobile td[data-label="Chat"]::before {
        display: block;
        margin-bottom: 8px;
    }

    .table-responsive-mobile td[data-label="Chat"] > * {
        max-width: 100% !important; /* Permite que el cuadro de mensajes se estire */
        width: 100%;
    }

    .table-responsive-mobile td::before {
        content: attr(data-label);
        font-weight: 800;
        color: #555;
        font-size: 0.75rem;
    }

    /* Botones y Gestión */
    .table-responsive-mobile td[data-label="Gestión"] {
        display: block !important;
        border-bottom: none !important;
    }

    .btn {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 12px !important;
    }
}

@media (max-width: 768px) {
    .table-responsive-mobile thead { display: none; }
    
    /* Tarjeta Gris Ceniza */
    .table-responsive-mobile tr {
        display: block;
        background: #ececec !important; /* Gris ceniza suave */
        border: 1px solid #d1d1d1;
        border-radius: 15px;
        margin-bottom: 25px;
        padding: 18px; /* Más espacio interno */
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    }
    
    .table-responsive-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0; /* Espacio entre filas internas */
        border: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
        min-height: 45px;
    }

    /* Evitar que el ID se duplique visualmente si ya viene con el # en el before */
    .table-responsive-mobile td::before {
        content: attr(data-label);
        font-weight: 800;
        color: #555;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    /* Ajuste para que el texto largo no rompa la tarjeta */
    .table-responsive-mobile td > * {
        max-width: 65%;
        text-align: right;
    }

    /* El chat ocupa todo el ancho */
    td[data-label="Chat"], td[data-label="Gestión"] {
        flex-direction: column !important;
        align-items: stretch !important;
        border-bottom: none !important;
    }

    td[data-label="Chat"]::after {
        content: "";
        display: block;
        height: 1px;
        background: rgba(0,0,0,0.08);
        margin-top: 10px;
    }

    .btn {
        width: 100%;
        padding: 14px;
        font-weight: bold;
        border-radius: 8px;
    }
}

/* Colores de estados (Fuera del media query para que funcionen siempre) */
.badge.Pendiente { background-color: #ffc107; color: #000; }
.badge.En.Proceso { background-color: #17a2b8; color: #fff; }
.badge.Listo { background-color: #28a745; color: #fff; }

/* Colores de estados */
.badge.Pendiente { background-color: #ffc107; color: #000; } /* Amarillo */
.badge.En.Proceso { background-color: #17a2b8; color: #fff; } /* Azul */
.badge.Listo { background-color: #28a745; color: #fff; } /* Verde */

/* Diseño para móvil */
@media (max-width: 768px) {
    .table-responsive-mobile thead { display: none; }
    
    .table-responsive-mobile tr {
        display: block;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        margin-bottom: 15px;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .table-responsive-mobile td {
        display: flex;
        justify-content: space-between;
        padding: 8px 5px;
        border-top: none;
    }

    .table-responsive-mobile td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #495057;
    }
    
    .btn {
        width: 100%;
        margin-top: 5px;
    }
}

@media (max-width: 768px) {
    /* Forzamos que el historial y el chat ocupen su propia línea completa */
    td[data-label="Historial"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .input-group .form-control {
        font-size: 16px; /* Evita que iOS haga zoom automático al enfocar */
    }
}